/* Portfolio section — additive styles only.
   Typography, buttons, sections, container, .h1/.h2/.txt-primary all come
   from the existing Webflow CSS so the pages match the rest of the site.
   This file only adds the bits that don't already exist (cards, badges,
   demo card, features grid). */

/* Match the inline <style> reset every other page on the site uses.
   Without this, the global `a { text-decoration: underline }` rule in
   letsbuildmyapp.webflow.css makes every nav/footer link underlined. */
a { color: inherit; text-decoration: unset; }

/* The global wrapper in letsbuildmyapp.webflow.css is `.global {
   position: fixed; inset: 0% auto auto 0%; }` — that anchors everything
   to the top-left of the viewport with no width, which on the portfolio
   pages was killing page scroll and pulling the centered .container
   left. The other pages get away with it because Webflow's runtime
   adjusts width via interactions tied to data-w-id elements; rather than
   replicate that, just put .global back into normal flow. */
.global { position: static; width: 100%; }
html, body { overflow-x: hidden; }

:root {
  --pf-line: #e5e7eb;
  --pf-line-soft: #f1f3f6;
  --pf-bg-soft: #f7f9fc;
  --pf-blue: #008afc;
  --pf-blue-soft: #eaf4fe;
  --pf-blue-dark: #006ad1;
  --pf-ink: #0a0e1a;
  --pf-ink-soft: #4b5563;
  --pf-muted: #6b7280;
  --pf-radius: 14px;
  --pf-radius-lg: 20px;
  --pf-shadow-card: 0 1px 2px rgba(10, 14, 26, 0.04), 0 8px 24px rgba(10, 14, 26, 0.06);
  --pf-shadow-card-hover: 0 2px 4px rgba(10, 14, 26, 0.06), 0 16px 40px rgba(10, 14, 26, 0.10);
}

/* ---- Listing hero kicker (matches homepage pill) ---- */
.pf-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  background-color: #eaf4fe;
  border: 1px solid #aad8fe;
  border-radius: 999px;
  margin-bottom: 0.75em;
}
.pf-kicker-dot {
  width: 6px;
  height: 6px;
  background-color: #008afc;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.pf-kicker-text {
  font-size: 0.875em;
  font-weight: 600;
  color: #008afc;
  line-height: 1;
}

.pf-hero-text {
  text-align: center;
  max-width: 880px;
  margin: 0 auto 4em;
}
.pf-hero-text .h1 { margin-bottom: 0.5em; }
.pf-hero-text .p-big { color: var(--pf-ink-soft); }

/* ---- Grid of apps ---- */
.pf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.5em;
  margin-bottom: 4em;
}
.pf-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--pf-line);
  border-radius: var(--pf-radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  box-shadow: var(--pf-shadow-card);
}
.pf-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--pf-shadow-card-hover);
  border-color: #d6dde6;
}
.pf-card-thumb {
  position: relative;
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, #f3f6fb 0%, #e8eef7 100%);
  overflow: hidden;
}
.pf-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0 !important;
  border-radius: 0 !important;
}
.pf-card-thumb-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 1.5em;
  font-weight: 600;
  color: var(--pf-blue);
  letter-spacing: -0.01em;
}
.pf-card-coming {
  position: absolute;
  top: 0.875em;
  left: 0.875em;
  padding: 0.3em 0.75em;
  background: rgba(10, 14, 26, 0.85);
  color: #fff;
  font-size: 0.7em;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 6px;
  backdrop-filter: blur(8px);
}
.pf-card-body {
  padding: 1.5em;
  display: flex;
  flex-direction: column;
  gap: 0.625em;
  flex: 1;
}
.pf-card-industry {
  font-size: 0.75em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--pf-blue-dark);
}
.pf-card-name {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.5em;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--pf-ink);
  margin: 0;
  line-height: 1.2;
}
.pf-card-tagline {
  font-size: 1em;
  color: var(--pf-ink-soft);
  margin: 0;
  line-height: 1.5;
}
.pf-card-cta {
  margin-top: auto;
  padding-top: 1em;
  font-size: 0.9em;
  font-weight: 600;
  color: var(--pf-blue);
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}
.pf-card:hover .pf-card-cta { color: var(--pf-blue-dark); }

/* ---- Cross-portfolio standards strip ---- */
.pf-standards {
  background: var(--pf-bg-soft);
  border: 1px solid var(--pf-line);
  border-radius: var(--pf-radius-lg);
  padding: 3em 2.5em;
  margin-bottom: 2em;
}
.pf-standards .h3 { margin-bottom: 0.4em; }
.pf-standards .pf-standards-lead {
  color: var(--pf-ink-soft);
  margin: 0 0 1.75em;
}
.pf-standards ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0.75em 1.5em;
}
.pf-standards li {
  font-size: 0.95em;
  color: var(--pf-ink-soft);
  padding-left: 1.75em;
  position: relative;
  line-height: 1.5;
}
.pf-standards li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--pf-blue);
  font-weight: 700;
}
.pf-standards li strong { color: var(--pf-ink); font-weight: 600; }

/* CTA wave shape defaults to a black fill — match index.html and color
   it white so the transition into the blue CTA section looks clean. */
.cta_top-shape .shape-fill,
.cta_bottom-shape .shape-fill { fill: #ffffff; }

/* ---- Detail page 2-column layout ---- */
.pf-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 4em;
  align-items: start;
}
.pf-detail-left { min-width: 0; }
.pf-detail-right {
  display: flex;
  flex-direction: column;
  gap: 1.75em;
}
/* Tighter section heading sizes inside the narrower left column */
.pf-detail-left .h2 { font-size: 2.4em; line-height: 1.1; }
.pf-detail-left .pf-detail-tagline { font-size: 1.25em; }
@media (max-width: 900px) {
  .pf-detail-layout { grid-template-columns: 1fr; gap: 2.5em; }
  .pf-detail-right {
    order: -1;
    flex-direction: row;
    gap: 1em;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    /* break out of container padding so scroll runs edge-to-edge */
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 0.5em max(1.25rem, calc(50vw - 50%)) 0.75em;
    scrollbar-width: none;
  }
  .pf-detail-right::-webkit-scrollbar { display: none; }
  .pf-detail-right .pf-shot {
    flex: 0 0 85%;
    max-width: 85%;
    scroll-snap-align: start;
  }
}
.pf-back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: 0.875em;
  font-weight: 500;
  color: var(--pf-ink-soft);
  text-decoration: none;
  padding: 0.5em 0.875em 0.5em 0.75em;
  background: var(--pf-line-soft);
  border: 1px solid var(--pf-line);
  border-radius: 999px;
  margin-bottom: 2em;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.pf-back-link:hover {
  color: var(--pf-blue-dark);
  background: var(--pf-blue-soft);
  border-color: var(--pf-blue-soft);
}
.pf-source-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-size: 0.85em;
  font-weight: 500;
  color: var(--pf-muted);
  text-decoration: none;
  margin-bottom: 0.5em;
  transition: color 0.15s ease;
}
.pf-source-link:hover { color: var(--pf-ink); }
.pf-source-link svg { stroke: currentColor; }

.pf-detail-industry {
  font-size: 0.8em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--pf-blue-dark);
  margin-bottom: 1em;
}
.pf-detail-tagline {
  font-size: 1.4em;
  color: var(--pf-ink-soft);
  font-weight: 400;
  line-height: 1.45;
  margin: 0.5em 0 1.5em;
}
.pf-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875em;
  margin-bottom: 1.25em;
}
.pf-btn-disabled {
  display: inline-flex;
  align-items: center;
  padding: 0.875em 1.5em;
  font-size: 0.95em;
  font-weight: 600;
  border-radius: 10px;
  background: var(--pf-line-soft);
  color: var(--pf-muted);
  cursor: not-allowed;
}

/* ---- Screenshot rail (right column) ---- */
.pf-shot {
  margin: 0;
  border-radius: var(--pf-radius-lg);
  overflow: hidden;
  box-shadow: 0 12px 40px -16px rgba(10, 14, 26, 0.2), 0 2px 8px -2px rgba(10, 14, 26, 0.08);
  border: 1px solid var(--pf-line);
  background: #fff;
}
.pf-shot-hero {
  box-shadow: 0 20px 60px -20px rgba(10, 14, 26, 0.25), 0 4px 12px -4px rgba(10, 14, 26, 0.1);
}
.pf-shot img {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
}
.pf-shot-link {
  display: block;
  cursor: pointer;
  transition: transform 0.25s ease;
}
.pf-shot-link:hover { transform: translateY(-2px); }
.pf-shot:has(.pf-shot-link:hover) {
  box-shadow: 0 28px 70px -20px rgba(0, 138, 252, 0.35), 0 6px 16px -4px rgba(10, 14, 26, 0.15);
}
.pf-shot figcaption {
  padding: 0.875em 1.25em;
  font-size: 0.9em;
  color: var(--pf-muted);
  border-top: 1px solid var(--pf-line);
  background: #fafbfd;
}

/* ---- Demo card ---- */
.pf-demo-card {
  background: linear-gradient(135deg, #f7f9fc 0%, #eef3fb 100%);
  border: 1px solid var(--pf-line);
  border-radius: var(--pf-radius-lg);
  padding: 2em;
}
.pf-demo-card-h {
  font-size: 0.75em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--pf-blue-dark);
  margin: 0 0 1em;
}
.pf-demo-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  padding: 0.875em 0;
  border-bottom: 1px solid rgba(10, 14, 26, 0.08);
  font-size: 0.95em;
}
.pf-demo-row:last-child { border-bottom: 0; }
.pf-demo-key { color: var(--pf-muted); font-weight: 500; }
.pf-demo-val {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  color: var(--pf-ink);
  font-size: 0.9em;
}
.pf-demo-empty {
  font-size: 0.95em;
  color: var(--pf-muted);
  font-style: italic;
}
.pf-demo-note {
  margin-top: 1.25em;
  padding-top: 1em;
  border-top: 1px solid rgba(10, 14, 26, 0.08);
  font-size: 0.85em;
  color: var(--pf-muted);
  line-height: 1.5;
}

/* ---- Detail body sections ---- */
.pf-section { margin-bottom: 4em; }
.pf-section-label {
  font-size: 0.75em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--pf-blue-dark);
  margin-bottom: 0.75em;
}
.pf-body-text {
  font-size: 1.0625em;
  color: var(--pf-ink-soft);
  line-height: 1.7;
  max-width: 720px;
  margin: 0;
}

/* ---- Tech stack badges ---- */
.pf-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625em;
  margin-top: 1em;
}
.pf-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.5em 0.875em;
  background: #fff;
  border: 1px solid var(--pf-line);
  border-radius: 8px;
  font-size: 0.875em;
  font-weight: 500;
  color: var(--pf-ink);
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  letter-spacing: -0.01em;
}

/* ---- Features grid ---- */
.pf-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.625em 1em;
  list-style: none;
  padding: 0;
  margin: 1em 0 0;
}
.pf-features li {
  display: flex;
  align-items: center;
  gap: 0.75em;
  padding: 0.75em 0.875em;
  background: var(--pf-bg-soft);
  border: 1px solid var(--pf-line);
  border-radius: 10px;
  font-size: 0.9em;
  color: var(--pf-ink);
  line-height: 1.45;
}
.pf-feat-icon {
  flex: 0 0 2em;
  width: 2em;
  height: 2em;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #008afc 0%, #4ba8ff 100%);
  color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 138, 252, 0.25);
}
.pf-feat-icon svg {
  width: 1.125em;
  height: 1.125em;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pf-feat-text { flex: 1; }

/* ---- Look-and-feel callout ---- */
.pf-look {
  background: var(--pf-bg-soft);
  color: var(--pf-ink-soft);
  border: 1px solid var(--pf-line);
  border-radius: var(--pf-radius-lg);
  padding: 2.25em;
  font-size: 1em;
  line-height: 1.65;
  margin-bottom: 4em;
}
.pf-look .pf-section-label { color: var(--pf-blue-dark); margin-bottom: 0.75em; }
.pf-look h3 {
  color: var(--pf-ink);
  font-family: 'Montserrat', sans-serif;
  font-size: 1.5em;
  font-weight: 700;
  margin: 0 0 0.75em;
  letter-spacing: -0.01em;
}
.pf-look p { margin: 0; }

/* ---- Industry tag chips ---- */
.pf-tag-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  margin-top: 0.5em;
  margin-bottom: 4em;
}
.pf-tag-chip {
  padding: 0.35em 0.75em;
  background: var(--pf-blue-soft);
  color: var(--pf-blue-dark);
  border-radius: 6px;
  font-size: 0.8em;
  font-weight: 500;
}

/* ---- Button hover animations (CSS-only, scoped to portfolio pages) ----
   Mirrors the Webflow IX2 hover effect on the homepage so dynamically
   injected buttons (and static ones not bound by IX2) animate without
   needing Webflow's runtime interaction system. */
.pf-section-wrap .button,
.pf-section-wrap + .section.cta .button,
.section.cta .button {
  transition: color 0.3s cubic-bezier(.215,.61,.355,1),
              border-color 0.3s ease;
}
/* Make .button-bg.bottom an animated overlay that fills from the bottom */
.pf-section-wrap .button .button-bg.bottom,
.section.cta .button .button-bg.bottom {
  height: 0;
  width: 100%;
  inset: auto 0 0 0;
  transition: height 0.35s cubic-bezier(.215,.61,.355,1);
}
.pf-section-wrap .button:hover .button-bg.bottom,
.section.cta .button:hover .button-bg.bottom {
  height: 100%;
}
/* Make .button-bg.center an animated circle that expands on hover */
.pf-section-wrap .button .button-bg.center,
.section.cta .button .button-bg.center {
  width: 0;
  height: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.4s cubic-bezier(.215,.61,.355,1),
              height 0.4s cubic-bezier(.215,.61,.355,1);
}
.pf-section-wrap .button:hover .button-bg.center,
.section.cta .button:hover .button-bg.center {
  width: 250%;
  height: 600%;
}
/* Color inversions on hover, matching homepage behavior:
   - .button (blue bg, white text):  fills white  → text turns primary blue
   - .button.black (black bg, white text): fills white → text turns black
   - .button.white (white bg, black text):  fills black → text turns white
   - .button.outlined (white bg, blue text): fills primary → text turns white */
.pf-section-wrap .button:not(.black):not(.white):not(.outlined):hover .button-text {
  color: var(--primary--500);
}
.pf-section-wrap .button.black:hover .button-text {
  color: var(--black);
}
.pf-section-wrap .button.white:hover .button-text,
.section.cta .button.white:hover .button-text {
  color: var(--white);
}
.pf-section-wrap .button.outlined:hover .button-text {
  color: var(--white);
}

/* ---- Gradient nav CTA (replaces sad black "Book a free strategy call") ---- */
.button.pf-gradient {
  border: none !important;
  background: linear-gradient(135deg, #008afc 0%, #4ba8ff 50%, #6db4ff 100%);
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(0, 138, 252, 0.28),
              0 1px 2px rgba(0, 138, 252, 0.20);
  transition: box-shadow 0.3s ease, transform 0.2s ease;
  position: relative;
  overflow: hidden;
}
.button.pf-gradient::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #006ad1 0%, #2a8cf0 50%, #4ba8ff 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
}
.button.pf-gradient:hover {
  box-shadow: 0 6px 22px rgba(0, 138, 252, 0.45),
              0 2px 4px rgba(0, 138, 252, 0.30);
  transform: translateY(-1px);
}
.button.pf-gradient:hover::before { opacity: 1; }
.button.pf-gradient .button-text {
  position: relative;
  z-index: 2;
  color: #fff;
}
.button.pf-gradient .button-bg { display: none; }
.pf-section-wrap .button.pf-gradient:hover .button-text { color: #fff; }

/* ---- Section spacing tweaks for portfolio pages ---- */
.section.pf-section-wrap {
  padding-top: 11em;
  padding-bottom: 5em;
}
@media (max-width: 768px) {
  .section.pf-section-wrap { padding-top: 7em; padding-bottom: 3em; }
}