/* ─────────────────────────────────────────────────
   PORTFOLIO.CSS
   Sections: ph- (Portfolio Hero) · fp- (Featured Projects)
   Illustrations: phv- · fp1v- · fp2v- · fp3v- · fp4v- · fp5v- · fp6v-
───────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════
   SHARED MICRO-UTILITIES
═══════════════════════════════════════════════ */

/* Float animation for chips/cards */
@keyframes pf-float-a {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}
@keyframes pf-float-b {
  0%, 100% { transform: translateY(-3px); }
  50%       { transform: translateY(3px); }
}
@keyframes pf-float-c {
  0%, 100% { transform: translateY(2px); }
  50%       { transform: translateY(-4px); }
}

/* Pulse dot */
@keyframes ph-dot-pulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(27, 142, 248, 0.24); }
  50%       { box-shadow: 0 0 0 4px rgba(27, 142, 248, 0.10); }
}

/* Live dot blink */
@keyframes pf-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.3; }
}



/* ═══════════════════════════════════════════════
   SECTION 1 — PORTFOLIO HERO (ph-)
═══════════════════════════════════════════════ */

.ph-hero {
  position: relative;
  overflow: hidden;
  padding-top: calc(var(--header-height) + var(--header-top-offset) + var(--space-10));
  padding-bottom: var(--space-12);
}

/* ── Background ── */
.ph-hero__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.ph-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.12;
}
.ph-glow--tl {
  width: 560px;
  height: 560px;
  top: -140px;
  left: -160px;
  background: radial-gradient(circle, var(--color-brand-primary), transparent 70%);
}
.ph-glow--br {
  width: 440px;
  height: 440px;
  bottom: -120px;
  right: -100px;
  background: radial-gradient(circle, var(--color-brand-primary), transparent 70%);
  opacity: 0.07;
}
.ph-hero__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 20%, transparent 80%);
}

/* ── Container ── */
.ph-hero__container {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 55fr 45fr;
  gap: var(--space-8);
  align-items: center;
}

/* ── Content ── */
.ph-hero__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* Badge */
.ph-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 16px 7px 12px;
  background: var(--color-brand-faint);
  border: 1px solid var(--color-border-brand);
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--color-brand-light);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  width: fit-content;
}
.ph-hero__badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-brand-primary);
  flex-shrink: 0;
  animation: ph-dot-pulse 2.4s ease-in-out infinite;
}

/* Heading */
.ph-hero__heading {
  font-family: 'Manrope', var(--font-sans);
  font-size: var(--text-5xl);
  font-weight: var(--font-extrabold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
  margin: 0;
  text-wrap: balance;
}
.ph-hero__heading-accent {
  background: linear-gradient(135deg, var(--color-brand-primary) 0%, var(--color-brand-light) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Description */
.ph-hero__desc {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
  max-width: 480px;
  margin: 0;
}

/* Actions */
.ph-hero__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}


/* ── Visual: Projects Overview Dashboard ── */
.ph-hero__visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.phv-glow {
  position: absolute;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(27,142,248,0.15), transparent 70%);
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
}

/* Main card */
.phv-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: var(--radius-xl);
  backdrop-filter: blur(12px);
  overflow: hidden;
}

/* Chrome bar */
.phv-card__chrome {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.02);
}
.phv-chrome-dots {
  display: flex;
  gap: 5px;
}
.phv-cdot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: block;
}
.phv-cdot--r { background: #FF5F57; }
.phv-cdot--y { background: #FFBD2E; }
.phv-cdot--g { background: #28C840; }

.phv-card__title {
  flex: 1;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--color-text-secondary);
  letter-spacing: var(--tracking-wide);
}
.phv-card__count {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--color-brand-light);
  background: var(--color-brand-faint);
  border: 1px solid var(--color-border-brand);
  border-radius: var(--radius-sm);
  padding: 2px 8px;
}

/* Body */
.phv-card__body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 2×2 tiles */
.phv-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.phv-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.02);
  overflow: hidden;
}
.phv-tile__accent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 0 0 2px 2px;
}
.phv-tile--health .phv-tile__accent { background: #06B6D4; }
.phv-tile--ecom   .phv-tile__accent { background: #8B5CF6; }
.phv-tile--erp    .phv-tile__accent { background: #F59E0B; }
.phv-tile--crm    .phv-tile__accent { background: #F43F5E; }

.phv-tile__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.05);
}
.phv-tile--health .phv-tile__icon { color: #06B6D4; }
.phv-tile--ecom   .phv-tile__icon { color: #8B5CF6; }
.phv-tile--erp    .phv-tile__icon { color: #F59E0B; }
.phv-tile--crm    .phv-tile__icon { color: #F43F5E; }

.phv-tile__name {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
  line-height: 1.3;
}
.phv-tile__status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: var(--font-semibold);
  border-radius: 3px;
  padding: 1px 5px;
  width: fit-content;
  letter-spacing: 0.03em;
}
.phv-tile__status--live {
  color: #22C55E;
  background: rgba(34,197,94,0.12);
}
.phv-tile__status--new {
  color: #1B8EF8;
  background: rgba(27,142,248,0.12);
}

/* Stats row */
.phv-stats {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0 0;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.phv-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.phv-stat__val {
  font-family: 'Manrope', var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--font-extrabold);
  color: var(--color-text-primary);
  line-height: 1;
}
.phv-stat__lbl {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: var(--font-medium);
  color: var(--color-text-tertiary);
  letter-spacing: 0.03em;
}
.phv-stat-sep {
  width: 1px;
  height: 28px;
  background: rgba(255,255,255,0.08);
}

/* Floating: notification (top-right) */
.phv-notif {
  position: absolute;
  /* Was -18px, which put the chip's bottom well inside the card's own
     header bar, covering the "50+ Delivered" count badge — confirmed
     at 1024/1280/1440px. -56px clears the ~49px header bar entirely. */
  top: -56px;
  right: -20px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(12, 22, 40, 0.96);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  animation: pf-float-a 4.2s ease-in-out infinite;
  white-space: nowrap;
}
.phv-notif__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22C55E;
  flex-shrink: 0;
  animation: pf-blink 1.8s ease-in-out infinite;
}
.phv-notif__title {
  display: block;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
}
.phv-notif__sub {
  display: block;
  font-family: var(--font-body);
  font-size: 10px;
  color: var(--color-text-tertiary);
  margin-top: 1px;
}

/* Floating: tech chip (bottom-left) */
.phv-tech-chip {
  position: absolute;
  bottom: -16px;
  left: -24px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  background: rgba(12, 22, 40, 0.96);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: var(--radius-full);
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.36);
  animation: pf-float-b 5s ease-in-out infinite;
  white-space: nowrap;
}
.phv-tech-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.phv-tech-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
  margin-left: 2px;
}


/* ═══════════════════════════════════════════════
   SECTION 2 — FEATURED PROJECTS (fp-)
═══════════════════════════════════════════════ */

.fp-section {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-12);
}
.fp-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.07) 30%, rgba(255,255,255,0.07) 70%, transparent 100%);
}

.fp-section__bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.fp-bg-glow--top {
  position: absolute;
  width: 700px;
  height: 500px;
  top: -200px;
  left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(27,142,248,0.06), transparent 65%);
  filter: blur(60px);
}

/* ── Section header ── */
.fp-section__header {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 600px;
  margin: 0 auto var(--space-8);
}

.fp-section__label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--color-brand-light);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}
.fp-section__label-line {
  display: block;
  width: 24px;
  height: 1.5px;
  background: var(--color-brand-primary);
  border-radius: 1px;
  flex-shrink: 0;
}

.fp-section__heading {
  font-family: 'Manrope', var(--font-sans);
  font-size: var(--text-4xl);
  font-weight: var(--font-extrabold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}
.fp-section__heading-accent {
  background: linear-gradient(135deg, var(--color-brand-primary) 0%, var(--color-brand-light) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.fp-section__desc {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
  margin: 0;
}

.fp-section__note {
  font-size: var(--text-xs);
  /* rgba(255,255,255,0.62), not --color-text-tertiary (0.45) — 0.45 fails WCAG AA
     4.5:1 at this font size; bumped locally rather than raising the shared
     variable, to avoid changing contrast elsewhere. */
  color: rgba(255, 255, 255, 0.62);
  margin: 0;
  margin-top: var(--space-3);
}

/* ── Project list ── */
.fp-list {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* ── Each project item ── */
.fp-item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: center;
  padding: var(--space-6);
  background: rgba(255,255,255,0.015);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-xl);
  transition: border-color 0.3s ease, background 0.3s ease;
}
.fp-item:hover {
  border-color: rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.025);
}

/* Alternating: flip visual to right side */
.fp-item--alt .fp-item__visual { order: 2; }
.fp-item--alt .fp-item__content { order: 1; }

/* ── Visual wrapper (shared) ── */
.fp-item__visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
}

/* ── Content ── */
.fp-item__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: 0;
}

/* Industry badge */
.fp-item__industry {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  width: fit-content;
}
.fp-item__industry[data-color="health"]     { color: #06B6D4; background: rgba(6,182,212,0.12); border: 1px solid rgba(6,182,212,0.2); }
/* color: #A78BFA, not #8B5CF6 — #8B5CF6 fails WCAG AA 4.5:1 on this background (measured 3.94:1) */
.fp-item__industry[data-color="ecom"]       { color: #A78BFA; background: rgba(139,92,246,0.12); border: 1px solid rgba(139,92,246,0.2); }
.fp-item__industry[data-color="erp"]        { color: #F59E0B; background: rgba(245,158,11,0.12); border: 1px solid rgba(245,158,11,0.2); }
.fp-item__industry[data-color="realestate"] { color: #1B8EF8; background: rgba(27,142,248,0.12); border: 1px solid rgba(27,142,248,0.2); }
.fp-item__industry[data-color="crm"]        { color: #F43F5E; background: rgba(244,63,94,0.12); border: 1px solid rgba(244,63,94,0.2); }
.fp-item__industry[data-color="lms"]        { color: #10B981; background: rgba(16,185,129,0.12); border: 1px solid rgba(16,185,129,0.2); }

/* Project heading */
.fp-item__heading {
  font-family: 'Manrope', var(--font-sans);
  font-size: var(--text-2xl);
  font-weight: var(--font-extrabold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
  margin: 0;
}

/* Overview */
.fp-item__overview {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
  margin: 0;
}

/* Tech stack pills — flat row, no container */
.fp-item__tech {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.fp-item__tag--tech {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: var(--font-medium);
  color: var(--color-brand-light);
  background: var(--color-brand-faint);
  border: 1px solid var(--color-border-brand);
  border-radius: var(--radius-sm);
  padding: 3px 9px;
}

/* Highlights */
.fp-item__highlights {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.fp-item__highlight {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: var(--font-semibold);
  color: var(--color-text-secondary);
  padding: 3px 9px;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
}
.fp-item__highlight::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-brand-primary);
  flex-shrink: 0;
}

/* CTA */
.fp-item__cta { margin-top: var(--space-1); }


/* ═══════════════════════════════════════════════
   ILLUSTRATION 1 — Healthcare (fp1v-)
   Layout: Appointment scheduler rows
   Accent: Cyan #06B6D4
═══════════════════════════════════════════════ */

.fp1v-wrap {
  position: relative;
  width: 100%;
  max-width: 400px;
}
.fp1v-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 320px;
  height: 320px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(6,182,212,0.14), transparent 65%);
  filter: blur(50px);
  pointer-events: none;
  border-radius: 50%;
}
.fp1v-panel {
  position: relative;
  z-index: 1;
  background: rgba(6,12,28,0.85);
  border: 1px solid rgba(6,182,212,0.2);
  border-radius: var(--radius-xl);
  backdrop-filter: blur(16px);
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.04), 0 24px 64px rgba(0,0,0,0.5);
}
.fp1v-panel__header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  background: rgba(6,182,212,0.05);
}
.fp1v-header-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  background: rgba(6,182,212,0.15);
  color: #06B6D4;
  flex-shrink: 0;
}
.fp1v-header-title {
  flex: 1;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
}
.fp1v-live-badge {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: var(--font-semibold);
  color: #22C55E;
  background: rgba(34,197,94,0.1);
  border: 1px solid rgba(34,197,94,0.2);
  border-radius: var(--radius-full);
  padding: 2px 8px;
}
.fp1v-live-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #22C55E;
  animation: pf-blink 1.8s ease-in-out infinite;
}
.fp1v-filters {
  display: flex;
  gap: 4px;
  padding: 10px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.fp1v-filter {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: var(--font-medium);
  color: var(--color-text-tertiary);
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  cursor: default;
}
.fp1v-filter--active {
  color: #06B6D4;
  background: rgba(6,182,212,0.1);
}
.fp1v-rows { display: flex; flex-direction: column; }
.fp1v-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.fp1v-row:last-child { border-bottom: none; }
.fp1v-row__time {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: var(--font-medium);
  color: var(--color-text-tertiary);
  width: 38px;
  flex-shrink: 0;
}
.fp1v-row__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.fp1v-row__name {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
}
.fp1v-row__dept {
  font-family: var(--font-body);
  font-size: 10px;
  color: var(--color-text-tertiary);
}
.fp1v-badge {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: var(--font-semibold);
  border-radius: var(--radius-sm);
  padding: 2px 7px;
  white-space: nowrap;
}
.fp1v-badge--done   { color: #64748B; background: rgba(100,116,139,0.12); }
.fp1v-badge--active { color: #06B6D4; background: rgba(6,182,212,0.14); }
.fp1v-badge--next   { color: #F59E0B; background: rgba(245,158,11,0.12); }
.fp1v-badge--soon   { color: #8B5CF6; background: rgba(139,92,246,0.12); }
.fp1v-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Guarantees a minimum gap between the 3 stats — without it,
     space-between collapses to ~0px once .fp1v-wrap's max-width makes
     the 3 nowrap labels take up the full available width (confirmed
     at 768px, stats were running together with no visible space). */
  gap: 10px;
  padding: 12px 18px;
  border-top: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.015);
}
.fp1v-footer-stat {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--color-text-tertiary);
}
.fp1v-footer-val {
  font-weight: var(--font-bold);
  color: var(--color-text-primary);
}
/* Floating chip */
.fp1v-chip {
  position: absolute;
  /* Was 20px, which put the chip over the footer's "Beds Available"
     stat (confirmed at 1280px) — -14px moves it fully below the panel. */
  bottom: -14px;
  right: -20px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 11px;
  background: rgba(6,182,212,0.1);
  border: 1px solid rgba(6,182,212,0.3);
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: var(--font-semibold);
  color: #06B6D4;
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  white-space: nowrap;
  animation: pf-float-c 4.8s ease-in-out infinite;
}


/* ═══════════════════════════════════════════════
   ILLUSTRATION 2 — E-Commerce (fp2v-)
   Layout: Browser window with product grid
   Accent: Violet #8B5CF6
═══════════════════════════════════════════════ */

.fp2v-wrap {
  position: relative;
  width: 100%;
  max-width: 400px;
}
.fp2v-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 320px;
  height: 320px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(139,92,246,0.14), transparent 65%);
  filter: blur(50px);
  pointer-events: none;
  border-radius: 50%;
}
.fp2v-browser {
  position: relative;
  z-index: 1;
  background: rgba(10,6,28,0.9);
  border: 1px solid rgba(139,92,246,0.2);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.04), 0 24px 64px rgba(0,0,0,0.5);
}
.fp2v-browser__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  background: rgba(139,92,246,0.04);
}
.fp2v-bdots { display: flex; gap: 5px; }
.fp2v-bdot { width: 8px; height: 8px; border-radius: 50%; display: block; }
.fp2v-bdot--r { background: #FF5F57; }
.fp2v-bdot--y { background: #FFBD2E; }
.fp2v-bdot--g { background: #28C840; }
.fp2v-url-bar {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 10px;
  /* rgba(255,255,255,0.58), not --color-text-tertiary (0.45) — 0.45 fails WCAG AA 4.5:1 */
  color: rgba(255, 255, 255, 0.58);
}
.fp2v-cart-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: var(--font-semibold);
  color: #8B5CF6;
  background: rgba(139,92,246,0.12);
  border-radius: var(--radius-full);
  padding: 2px 7px;
}
.fp2v-browser__body { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.fp2v-search {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-md);
  color: var(--color-text-tertiary);
}
.fp2v-search__text {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--color-text-tertiary);
}
.fp2v-cats {
  display: flex;
  gap: 5px;
  overflow: hidden;
}
.fp2v-cat {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: var(--font-medium);
  color: var(--color-text-tertiary);
  padding: 3px 9px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255,255,255,0.08);
  white-space: nowrap;
}
.fp2v-cat--active {
  color: #8B5CF6;
  background: rgba(139,92,246,0.1);
  border-color: rgba(139,92,246,0.25);
}
.fp2v-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.fp2v-product {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.02);
}
.fp2v-product__img {
  position: relative;
  height: 68px;
  background: rgba(139,92,246,0.08);
}
.fp2v-product__img--1 { background: linear-gradient(135deg, rgba(139,92,246,0.2), rgba(99,102,241,0.1)); }
.fp2v-product__img--2 { background: linear-gradient(135deg, rgba(6,182,212,0.18), rgba(139,92,246,0.12)); }
.fp2v-product__img--3 { background: linear-gradient(135deg, rgba(245,158,11,0.18), rgba(239,68,68,0.1)); }
.fp2v-product__img--4 { background: linear-gradient(135deg, rgba(16,185,129,0.18), rgba(6,182,212,0.1)); }
.fp2v-product__badge {
  position: absolute;
  top: 6px;
  left: 6px;
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: var(--font-bold);
  color: #fff;
  background: #8B5CF6;
  border-radius: 3px;
  padding: 1px 5px;
  letter-spacing: 0.03em;
}
.fp2v-product__badge--sale { background: #F43F5E; }
.fp2v-product__info {
  padding: 7px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.fp2v-product__name {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
}
.fp2v-product__price {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: var(--font-bold);
  color: #8B5CF6;
}
.fp2v-product__rating {
  font-size: 9px;
  color: #F59E0B;
}
/* Floating chip */
.fp2v-chip {
  position: absolute;
  top: 14px;
  right: -24px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 11px;
  background: rgba(139,92,246,0.1);
  border: 1px solid rgba(139,92,246,0.3);
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: var(--font-semibold);
  /* color: #A78BFA, not #8B5CF6 — #8B5CF6 fails WCAG AA 4.5:1 on this background (measured 4.04:1) */
  color: #A78BFA;
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  white-space: nowrap;
  animation: pf-float-a 4.2s ease-in-out infinite;
}


/* ═══════════════════════════════════════════════
   ILLUSTRATION 3 — ERP / Inventory (fp3v-)
   Layout: Data table with status badges
   Accent: Amber #F59E0B
═══════════════════════════════════════════════ */

.fp3v-wrap {
  position: relative;
  width: 100%;
  max-width: 420px;
}
.fp3v-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 320px;
  height: 320px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(245,158,11,0.12), transparent 65%);
  filter: blur(50px);
  pointer-events: none;
  border-radius: 50%;
}
.fp3v-panel {
  position: relative;
  z-index: 1;
  background: rgba(14,10,4,0.9);
  border: 1px solid rgba(245,158,11,0.18);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.04), 0 24px 64px rgba(0,0,0,0.5);
}
.fp3v-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  background: rgba(245,158,11,0.04);
}
.fp3v-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.fp3v-header-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-sm);
  background: rgba(245,158,11,0.14);
  color: #F59E0B;
}
.fp3v-header-title {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
}
.fp3v-alert-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: var(--font-semibold);
  color: #F59E0B;
  background: rgba(245,158,11,0.1);
  border: 1px solid rgba(245,158,11,0.2);
  border-radius: var(--radius-full);
  padding: 2px 8px;
}
.fp3v-table-head {
  display: grid;
  grid-template-columns: 72px 1fr 56px 80px;
  gap: 0;
  padding: 7px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.015);
}
.fp3v-table-head span {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: var(--font-semibold);
  color: var(--color-text-tertiary);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
}
.fp3v-rows { display: flex; flex-direction: column; }
.fp3v-row {
  display: grid;
  grid-template-columns: 72px 1fr 56px 80px;
  align-items: center;
  padding: 10px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.fp3v-row:last-child { border-bottom: none; }
.fp3v-sku {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--color-text-tertiary);
}
.fp3v-name {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: var(--font-medium);
  color: var(--color-text-primary);
}
.fp3v-qty {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
}
.fp3v-qty--warn { color: #F59E0B; }
.fp3v-status {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: var(--font-semibold);
  border-radius: var(--radius-sm);
  padding: 2px 7px;
  width: fit-content;
}
.fp3v-status--ok   { color: #22C55E; background: rgba(34,197,94,0.1); }
.fp3v-status--warn { color: #F59E0B; background: rgba(245,158,11,0.1); }
.fp3v-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 18px;
  border-top: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.01);
}
.fp3v-footer span {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--color-text-tertiary);
}
.fp3v-footer-action {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--color-brand-light) !important;
  cursor: default;
}
/* Floating chip */
.fp3v-chip {
  position: absolute;
  top: 20px;
  right: -28px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 11px;
  background: rgba(245,158,11,0.1);
  border: 1px solid rgba(245,158,11,0.28);
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: var(--font-semibold);
  color: #F59E0B;
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  white-space: nowrap;
  animation: pf-float-b 5.2s ease-in-out infinite;
}


/* ═══════════════════════════════════════════════
   ILLUSTRATION 4 — Real Estate (fp4v-)
   Layout: Property listing cards with map header
   Accent: Blue #1B8EF8
═══════════════════════════════════════════════ */

.fp4v-wrap {
  position: relative;
  width: 100%;
  max-width: 400px;
}
.fp4v-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 320px;
  height: 320px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(27,142,248,0.15), transparent 65%);
  filter: blur(50px);
  pointer-events: none;
  border-radius: 50%;
}
.fp4v-panel {
  position: relative;
  z-index: 1;
  background: rgba(4,10,24,0.9);
  border: 1px solid rgba(27,142,248,0.18);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.04), 0 24px 64px rgba(0,0,0,0.5);
}
.fp4v-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  background: rgba(27,142,248,0.04);
}
.fp4v-header-title {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
}
.fp4v-map-pin {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: var(--font-medium);
  color: var(--color-brand-light);
  background: var(--color-brand-faint);
  border: 1px solid var(--color-border-brand);
  border-radius: var(--radius-full);
  padding: 2px 8px;
}
.fp4v-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
}
.fp4v-card {
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: rgba(255,255,255,0.02);
}
.fp4v-card--featured {
  border-color: rgba(27,142,248,0.22);
  background: rgba(27,142,248,0.04);
}
.fp4v-card__img {
  position: relative;
  height: 80px;
  overflow: hidden;
}
.fp4v-img-block {
  position: absolute;
  inset: 0;
}
.fp4v-img-block--1 {
  background: linear-gradient(160deg, rgba(27,142,248,0.28) 0%, rgba(16,185,129,0.12) 100%);
}
.fp4v-img-block--2 {
  background: linear-gradient(160deg, rgba(139,92,246,0.2) 0%, rgba(27,142,248,0.15) 100%);
}
.fp4v-card__type {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 1;
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: var(--font-bold);
  color: #fff;
  background: rgba(27,142,248,0.8);
  border-radius: 3px;
  padding: 2px 6px;
  backdrop-filter: blur(4px);
  letter-spacing: 0.04em;
}
.fp4v-card__save {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(0,0,0,0.5);
  color: rgba(255,255,255,0.6);
  backdrop-filter: blur(4px);
}
.fp4v-card__body {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.fp4v-card__name {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
}
.fp4v-card__price {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: var(--font-bold);
  color: #1B8EF8;
}
.fp4v-card__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 2px;
}
.fp4v-card__meta span {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-body);
  font-size: 10px;
  color: var(--color-text-tertiary);
}
.fp4v-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.fp4v-count {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--color-text-tertiary);
}
.fp4v-trend {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: var(--font-semibold);
  color: #22C55E;
}
/* Floating chip */
.fp4v-chip {
  position: absolute;
  /* Was 16px, which put the chip over the "2,847 listings" footer stat
     (confirmed at 1280px) — -14px moves it fully below the panel. */
  bottom: -14px;
  left: -28px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 11px;
  background: rgba(27,142,248,0.1);
  border: 1px solid rgba(27,142,248,0.3);
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: var(--font-semibold);
  color: #1B8EF8;
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  white-space: nowrap;
  animation: pf-float-c 4.6s ease-in-out infinite;
}


/* ═══════════════════════════════════════════════
   ILLUSTRATION 5 — CRM / Sales (fp5v-)
   Layout: Kanban board with deal cards
   Accent: Rose #F43F5E
═══════════════════════════════════════════════ */

.fp5v-wrap {
  position: relative;
  width: 100%;
  max-width: 420px;
}
.fp5v-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 320px;
  height: 320px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(244,63,94,0.12), transparent 65%);
  filter: blur(50px);
  pointer-events: none;
  border-radius: 50%;
}
.fp5v-panel {
  position: relative;
  z-index: 1;
  background: rgba(14,4,8,0.9);
  border: 1px solid rgba(244,63,94,0.18);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.04), 0 24px 64px rgba(0,0,0,0.5);
}
.fp5v-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  background: rgba(244,63,94,0.04);
}
.fp5v-header-title {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
}
.fp5v-total {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: var(--font-semibold);
  color: #22C55E;
  background: rgba(34,197,94,0.1);
  border: 1px solid rgba(34,197,94,0.2);
  border-radius: var(--radius-sm);
  padding: 2px 8px;
}
.fp5v-board {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  padding: 14px 14px 10px;
  gap: 8px;
}
.fp5v-col { display: flex; flex-direction: column; gap: 6px; }
.fp5v-col__header {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 8px;
  margin-bottom: 2px;
}
.fp5v-col__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.fp5v-col__name {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: var(--font-semibold);
  color: var(--color-text-secondary);
  flex: 1;
}
.fp5v-col__count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--color-text-tertiary);
}
.fp5v-card {
  padding: 9px 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.fp5v-card--highlight {
  border-color: rgba(245,158,11,0.25);
  background: rgba(245,158,11,0.04);
}
.fp5v-card--won {
  border-color: rgba(34,197,94,0.22);
  background: rgba(34,197,94,0.04);
}
.fp5v-card__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px;
}
.fp5v-card__name {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
}
.fp5v-card__val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: var(--font-bold);
  color: #22C55E;
  white-space: nowrap;
}
.fp5v-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}
.fp5v-tag {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: var(--font-medium);
  color: var(--color-text-tertiary);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 3px;
  padding: 1px 5px;
}
.fp5v-card__won-badge {
  display: flex;
  align-items: center;
  gap: 3px;
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: var(--font-bold);
  color: #22C55E;
  margin-top: 2px;
  letter-spacing: 0.04em;
}
/* Floating chip */
.fp5v-chip {
  position: absolute;
  bottom: 14px;
  right: -28px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 11px;
  background: rgba(244,63,94,0.1);
  border: 1px solid rgba(244,63,94,0.28);
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: var(--font-semibold);
  color: #F43F5E;
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  white-space: nowrap;
  animation: pf-float-a 5s ease-in-out infinite;
}


/* ═══════════════════════════════════════════════
   ILLUSTRATION 6 — EdTech LMS (fp6v-)
   Layout: Course dashboard with progress ring + bars
   Accent: Emerald #10B981
═══════════════════════════════════════════════ */

.fp6v-wrap {
  position: relative;
  width: 100%;
  max-width: 400px;
}
.fp6v-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 320px;
  height: 320px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(16,185,129,0.14), transparent 65%);
  filter: blur(50px);
  pointer-events: none;
  border-radius: 50%;
}
.fp6v-panel {
  position: relative;
  z-index: 1;
  background: rgba(4,14,10,0.9);
  border: 1px solid rgba(16,185,129,0.2);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.04), 0 24px 64px rgba(0,0,0,0.5);
}
.fp6v-panel__header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  background: rgba(16,185,129,0.04);
}
.fp6v-header-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-sm);
  background: rgba(16,185,129,0.14);
  color: #10B981;
}
.fp6v-header-title {
  flex: 1;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
}
.fp6v-student-count {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: var(--font-semibold);
  color: #10B981;
  background: rgba(16,185,129,0.1);
  border: 1px solid rgba(16,185,129,0.2);
  border-radius: var(--radius-full);
  padding: 2px 8px;
}
.fp6v-body {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.fp6v-summary {
  display: flex;
  align-items: center;
  gap: 18px;
}
.fp6v-ring-wrap {
  position: relative;
  width: 80px;
  height: 80px;
  flex-shrink: 0;
}
.fp6v-ring {
  width: 80px;
  height: 80px;
}
.fp6v-ring-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
}
.fp6v-ring-pct {
  font-family: 'Manrope', var(--font-sans);
  font-size: 16px;
  font-weight: var(--font-extrabold);
  color: var(--color-text-primary);
  line-height: 1;
}
.fp6v-ring-lbl {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: var(--font-medium);
  color: var(--color-text-tertiary);
}
.fp6v-summary-stats {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fp6v-sum-stat {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.fp6v-sum-val {
  font-family: 'Manrope', var(--font-sans);
  font-size: var(--text-xl);
  font-weight: var(--font-extrabold);
  color: var(--color-text-primary);
  line-height: 1;
}
.fp6v-sum-lbl {
  font-family: var(--font-body);
  font-size: 10px;
  color: var(--color-text-tertiary);
}
.fp6v-courses {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 0 0;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.fp6v-course { display: flex; flex-direction: column; gap: 4px; }
.fp6v-course__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.fp6v-course__name {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: var(--font-medium);
  color: var(--color-text-secondary);
}
.fp6v-course__pct {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: var(--font-bold);
  color: #10B981;
}
.fp6v-bar {
  height: 4px;
  border-radius: 2px;
  background: rgba(255,255,255,0.06);
  overflow: hidden;
}
.fp6v-bar__fill {
  height: 100%;
  border-radius: 2px;
  transition: width 1.2s ease;
}
/* Floating chip */
.fp6v-chip {
  position: absolute;
  /* Was 14px, which put the chip directly over the "Learning Progress"
     panel title (confirmed at 1280px, covering it entirely) — -40px
     floats it above the panel instead, clearing the ~55px header. */
  top: -40px;
  left: -28px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 11px;
  background: rgba(16,185,129,0.1);
  border: 1px solid rgba(16,185,129,0.28);
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: var(--font-semibold);
  color: #10B981;
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  white-space: nowrap;
  animation: pf-float-b 4.4s ease-in-out infinite;
}


/* ═══════════════════════════════════════════════
   RESPONSIVE — PORTFOLIO PAGE
═══════════════════════════════════════════════ */

/* ── lg (1024px–1279px) ── */
@media (max-width: 1279px) {
  .ph-hero__heading { font-size: clamp(2.2rem, 4vw, var(--text-5xl)); }

  .fp-item { padding: var(--space-5); gap: var(--space-5); }

  .phv-notif  { right: -8px; }
  .phv-tech-chip { left: -12px; }
  .fp1v-chip, .fp2v-chip, .fp3v-chip, .fp4v-chip, .fp5v-chip, .fp6v-chip {
    right: -12px;
    left: auto;
  }
  .fp4v-chip, .fp6v-chip { left: -12px; right: auto; }
}

/* ── md (768px–1023px) ── */
@media (max-width: 1023px) {
  .ph-hero {
    padding-top: calc(72px + var(--header-top-offset) + var(--space-8));
    padding-bottom: var(--space-10);
  }
  .ph-hero__container {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-8);
  }
  .ph-hero__content { align-items: center; text-align: center; }
  .ph-hero__desc { max-width: 560px; }
  /* .phv-notif/.phv-tech-chip switch from position:absolute to static
     below (so they don't render off-screen at this width) — without a
     column direction here they'd sit in a row alongside .phv-card and
     flex-shrink it down to almost nothing. */
  .ph-hero__visual { justify-content: center; flex-direction: column; align-items: center; }
  .phv-card { max-width: 480px; }

  .fp-section { padding-block: var(--space-10); }
  .fp-section__header { margin-bottom: var(--space-6); }

  .fp-item {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
    padding: var(--space-5);
  }
  .fp-item--alt .fp-item__visual { order: 0; }
  .fp-item--alt .fp-item__content { order: 0; }
  .fp-item__visual { min-height: auto; }

  /* Clamp floating chips so they stay inside */
  .fp1v-chip, .fp2v-chip, .fp3v-chip, .fp4v-chip, .fp5v-chip, .fp6v-chip,
  .phv-notif, .phv-tech-chip {
    position: static;
    align-self: flex-start;
    margin-top: var(--space-2);
    animation: none;
  }
  .fp1v-wrap, .fp2v-wrap, .fp3v-wrap, .fp4v-wrap, .fp5v-wrap, .fp6v-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
  }
  .fp5v-board { grid-template-columns: 1fr 1fr 1fr; }
}

/* ── sm (480px–767px) ── */
@media (max-width: 767px) {
  .ph-hero {
    padding-top: calc(64px + var(--header-top-offset) + var(--space-6));
    padding-bottom: var(--space-8);
  }
  .ph-hero__heading { font-size: clamp(1.8rem, 7vw, 2.5rem); }

  .ph-hero__actions { justify-content: center; }

  .fp-section__heading { font-size: clamp(1.6rem, 6vw, var(--text-3xl)); }

  .fp-item { padding: var(--space-4); }

  .phv-tiles { grid-template-columns: 1fr 1fr; }

  .fp5v-board { grid-template-columns: 1fr 1fr; }
  .fp5v-col:last-child { display: none; }

  .fp2v-grid { grid-template-columns: 1fr 1fr; }

  .fp6v-summary { flex-direction: column; align-items: flex-start; }
  .fp6v-summary-stats { flex-direction: row; gap: var(--space-4); }
}

/* ── xs (≤479px) ── */
@media (max-width: 479px) {
  .ph-hero {
    padding-top: calc(64px + var(--header-top-offset) + var(--space-5));
  }
  .ph-hero__heading { font-size: clamp(1.6rem, 8vw, 2rem); }

  .fp-item { padding: var(--space-3); }

  .fp-item__heading { font-size: var(--text-xl); }

  .phv-tiles { grid-template-columns: 1fr 1fr; gap: 7px; }
  .phv-tile__name { font-size: 9px; }

  .fp3v-table-head { grid-template-columns: 60px 1fr 44px 70px; }
  .fp3v-row        { grid-template-columns: 60px 1fr 44px 70px; }

  .fp5v-board { grid-template-columns: 1fr 1fr; }

  .fp-item__tech { gap: 4px; }
}

/* ── very small (≤374px) ── */
@media (max-width: 374px) {
  .ph-hero__actions { flex-direction: column; align-items: stretch; }
  .ph-hero__actions .btn { justify-content: center; }

  .fp-item { padding: var(--space-3); }

  .fp5v-board { grid-template-columns: minmax(0, 1fr); }
  .fp5v-col:not(:first-child) { display: none; }

  .fp3v-table-head { display: none; }
  .fp3v-row { grid-template-columns: 1fr auto; }
  .fp3v-sku { display: none; }
  .fp3v-qty { display: none; }
}


/* ═══════════════════════════════════════════════════════════════════
   SECTION 3 — INDUSTRIES WE SERVE
   Prefix: iws-
═══════════════════════════════════════════════════════════════════ */

/* ── Section wrapper ── */
.iws-section {
  position: relative;
  padding-block: var(--space-12);
  overflow: hidden;
}

.iws-section::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.07) 30%,
    rgba(255, 255, 255, 0.07) 70%,
    transparent 100%
  );
}

/* ── Section header ── */
.iws-section__header {
  max-width: 600px;
  margin: 0 auto var(--space-8);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.iws-section__label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--color-brand-light);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

.iws-section__label-line {
  display: block;
  width: 24px;
  height: 1.5px;
  background: var(--color-brand-primary);
  border-radius: 2px;
  flex-shrink: 0;
}

.iws-section__heading {
  font-family: 'Manrope', var(--font-sans);
  font-size: var(--text-4xl);
  font-weight: var(--font-extrabold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
  margin: 0;
  text-wrap: balance;
}

.iws-heading-gradient {
  background: linear-gradient(135deg, var(--color-brand-primary) 0%, var(--color-brand-light) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.iws-section__desc {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  max-width: 480px;
  margin: 0;
}

/* ── Grid ── */
.iws-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2);
}

/* ── Tile base ── */
.iws-tile {
  position: relative;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--card-radius);
  padding: var(--space-3);
  cursor: default;
  transition:
    transform 0.28s cubic-bezier(0.34, 1.26, 0.64, 1),
    border-color 0.25s ease,
    background 0.25s ease,
    box-shadow 0.28s ease;
  outline: none;
}

.iws-tile:focus-visible {
  outline: 2px solid var(--color-brand-primary);
  outline-offset: 3px;
}

/* ── Per-industry accent tokens ── */
.iws-tile--health     { --iws-accent: #06B6D4; --iws-accent-bg: rgba(6, 182, 212, 0.08);   --iws-accent-hover: rgba(6, 182, 212, 0.10);   --iws-accent-border: rgba(6, 182, 212, 0.30);  --iws-glow: rgba(6, 182, 212, 0.10); }
.iws-tile--mfg        { --iws-accent: #F59E0B; --iws-accent-bg: rgba(245, 158, 11, 0.08);  --iws-accent-hover: rgba(245, 158, 11, 0.10);  --iws-accent-border: rgba(245, 158, 11, 0.28); --iws-glow: rgba(245, 158, 11, 0.10); }
.iws-tile--finance    { --iws-accent: #22C55E; --iws-accent-bg: rgba(34, 197, 94, 0.08);   --iws-accent-hover: rgba(34, 197, 94, 0.10);   --iws-accent-border: rgba(34, 197, 94, 0.28);  --iws-glow: rgba(34, 197, 94, 0.10); }
.iws-tile--retail     { --iws-accent: #A78BFA; --iws-accent-bg: rgba(167, 139, 250, 0.08); --iws-accent-hover: rgba(167, 139, 250, 0.10); --iws-accent-border: rgba(167, 139, 250, 0.28); --iws-glow: rgba(167, 139, 250, 0.10); }
.iws-tile--edu        { --iws-accent: #1B8EF8; --iws-accent-bg: rgba(27, 142, 248, 0.08);  --iws-accent-hover: rgba(27, 142, 248, 0.10);  --iws-accent-border: rgba(27, 142, 248, 0.28);  --iws-glow: rgba(27, 142, 248, 0.10); }
.iws-tile--logistics  { --iws-accent: #F97316; --iws-accent-bg: rgba(249, 115, 22, 0.08);  --iws-accent-hover: rgba(249, 115, 22, 0.10);  --iws-accent-border: rgba(249, 115, 22, 0.28);  --iws-glow: rgba(249, 115, 22, 0.10); }
.iws-tile--realestate { --iws-accent: #14B8A6; --iws-accent-bg: rgba(20, 184, 166, 0.08);  --iws-accent-hover: rgba(20, 184, 166, 0.10);  --iws-accent-border: rgba(20, 184, 166, 0.28);  --iws-glow: rgba(20, 184, 166, 0.10); }
.iws-tile--saas       { --iws-accent: #F472B6; --iws-accent-bg: rgba(244, 114, 182, 0.08); --iws-accent-hover: rgba(244, 114, 182, 0.10); --iws-accent-border: rgba(244, 114, 182, 0.28); --iws-glow: rgba(244, 114, 182, 0.10); }

/* ── Tile hover / focus states ── */
.iws-tile:hover,
.iws-tile:focus-within {
  transform: translateY(-4px);
  background: var(--iws-accent-hover);
  border-color: var(--iws-accent-border);
  box-shadow:
    0 8px 32px var(--iws-glow),
    0 0 0 1px var(--iws-accent-border);
}

/* ── Main row (icon + text + arrow) ── */
.iws-tile__main {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

/* ── Icon wrapper ── */
.iws-tile__icon-wrap {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--iws-accent-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--iws-accent);
  transition: background 0.25s ease;
}

.iws-tile:hover .iws-tile__icon-wrap,
.iws-tile:focus-within .iws-tile__icon-wrap {
  background: rgba(255, 255, 255, 0.06);
}

.iws-tile__icon-svg {
  width: 20px;
  height: 20px;
  transition: transform 0.38s cubic-bezier(0.34, 1.26, 0.64, 1);
}

.iws-tile:hover .iws-tile__icon-svg,
.iws-tile:focus-within .iws-tile__icon-svg {
  transform: scale(1.15);
}

/* ── Tile text ── */
.iws-tile__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.iws-tile__name {
  font-family: 'Manrope', var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
  line-height: 1.3;
  margin: 0;
  letter-spacing: -0.01em;
}

.iws-tile__desc {
  font-size: 11px;
  /* rgba(255,255,255,0.62), not --color-text-tertiary (0.45) — 0.45 fails WCAG AA
     4.5:1 against some of this component's accent-tinted backgrounds; bumped
     locally rather than raising the shared variable, to avoid changing
     contrast elsewhere. */
  color: rgba(255, 255, 255, 0.62);
  line-height: 1.5;
  margin: 0;
}

.iws-tile__case-link {
  position: relative;
  z-index: 2;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-brand-light);
  text-decoration: none;
  margin-top: 2px;
}

.iws-tile__case-link:hover {
  text-decoration: underline;
}

/* ── Arrow ── */
.iws-tile__arrow {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  color: var(--color-text-muted);
  margin-top: 3px;
  transition: transform 0.28s ease, color 0.22s ease;
}

.iws-tile:hover .iws-tile__arrow,
.iws-tile:focus-within .iws-tile__arrow {
  transform: translateX(3px) translateY(-3px);
  color: var(--iws-accent);
}

/* ── Solutions expand area ── */
.iws-tile__solutions {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  padding-top: 0;
  transition:
    max-height 0.38s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.28s ease 0.06s,
    padding-top 0.28s ease;
}

.iws-tile:hover .iws-tile__solutions,
.iws-tile:focus-within .iws-tile__solutions {
  max-height: 200px;
  opacity: 1;
  padding-top: 14px;
}

/* ── Solutions list ── */
.iws-solutions-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.iws-solutions-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: var(--color-text-tertiary);
  line-height: 1;
  opacity: 0;
  transform: translateX(-5px);
  transition:
    opacity 0.22s ease,
    transform 0.22s ease,
    color 0.2s ease;
}

.iws-tile:hover .iws-solutions-list li,
.iws-tile:focus-within .iws-solutions-list li {
  opacity: 1;
  transform: none;
  color: var(--color-text-secondary);
}

/* Staggered entry delays */
.iws-tile:hover .iws-solutions-list li:nth-child(1),
.iws-tile:focus-within .iws-solutions-list li:nth-child(1) { transition-delay: 0.09s; }

.iws-tile:hover .iws-solutions-list li:nth-child(2),
.iws-tile:focus-within .iws-solutions-list li:nth-child(2) { transition-delay: 0.14s; }

.iws-tile:hover .iws-solutions-list li:nth-child(3),
.iws-tile:focus-within .iws-solutions-list li:nth-child(3) { transition-delay: 0.19s; }

.iws-tile:hover .iws-solutions-list li:nth-child(4),
.iws-tile:focus-within .iws-solutions-list li:nth-child(4) { transition-delay: 0.24s; }

.iws-solutions-list li::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--iws-accent);
  flex-shrink: 0;
}


/* ── IWS Responsive ── */

/* xl (1024px–1279px): 4 columns, reduced gap */
@media (max-width: 1279px) {
  .iws-grid { gap: var(--space-1-5); }
  .iws-tile { padding: var(--space-2-5); }
}

/* md (768px–1023px): 2 columns */
@media (max-width: 1023px) {
  .iws-section__heading { font-size: var(--text-3xl); }
  .iws-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2);
  }
  .iws-tile { padding: var(--space-3); }
}

/* sm (480px–767px): 2 columns, tighter */
@media (max-width: 767px) {
  .iws-section { padding-block: var(--space-8); }
  .iws-section__heading { font-size: clamp(1.6rem, 6vw, var(--text-3xl)); }
  .iws-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-1-5);
  }
  .iws-tile { padding: var(--space-2-5); }
  .iws-tile__icon-wrap { width: 38px; height: 38px; }
  .iws-tile__icon-svg  { width: 18px; height: 18px; }
  .iws-tile__name      { font-size: 13px; }
}

/* xs (≤479px): 1 column */
@media (max-width: 479px) {
  .iws-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-1-5); }
  .iws-section__heading { font-size: clamp(1.5rem, 8vw, 2rem); }
  .iws-tile__icon-wrap { width: 36px; height: 36px; }
}

/* very small (≤374px) */
@media (max-width: 374px) {
  .iws-section__header { gap: var(--space-2); }
  .iws-tile { padding: var(--space-2); }
}