/* ==========================================================================
   Portfolio + project pages — shares the Abelaziz Siala brand system.
   Colors come from colors.css (single source of truth). Fonts match the
   landing page: Space Grotesk (display) + Inter (body).
   ========================================================================== */

:root {
  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --radius:       18px;
  --glow:         0 12px 40px -14px var(--glow-accent);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.12;
  margin: 0;
  letter-spacing: -0.01em;
}

a { color: inherit; text-decoration: none; }

p { margin: 0; }

.wrap {
  width: min(1200px, 100% - 2rem);
  margin-inline: auto;
}

.section { padding: clamp(4rem, 9vh, 6.5rem) 0; }

.section-head { margin-bottom: 2.4rem; max-width: 760px; }

.section-title {
  font-size: clamp(1.9rem, 3.4vw + .5rem, 2.7rem);
  font-weight: 700;
}

.section-sub {
  margin: .9rem 0 0;
  font-size: 1.05rem;
  color: var(--color-muted);
}
.section-sub strong { color: var(--color-accent-hover); font-weight: 600; }

/* Button -------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-family: var(--font-display);
  font-weight: 600;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  color: var(--color-on-accent);
  background: var(--color-accent-2);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--glow);
  background: var(--color-hover);
}
.btn-lg { padding: 1.05rem 2rem; font-size: 1.05rem; }
.btn-sm {
  padding: .55rem 1.2rem;
  font-size: .9rem;
  color: var(--color-accent-2);
  background: transparent;
  border: 1px solid var(--color-accent-2);
}
.btn-sm:hover {
  background: var(--color-hover);
  color: var(--color-on-accent);
}
.btn-ghost {
  padding: .55rem 1.2rem;
  font-size: .9rem;
  color: var(--color-muted);
  background: transparent;
  border: 1px solid var(--border-strong);
}
.btn-ghost:hover {
  color: var(--color-text);
  border-color: var(--color-accent-hover);
  transform: translateY(-2px);
}

/* Header -------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--overlay);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.header-inner {
  display: flex;
  align-items: center;
  gap: 2rem;
  height: 68px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  white-space: nowrap;
}
.brand-name { white-space: nowrap; }
.site-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  font-size: .92rem;
  color: var(--color-muted);
}
.site-nav a { transition: color .15s ease; }
.site-nav a:hover { color: var(--color-text); }
.site-nav .is-active { color: var(--color-text); }

/* ==========================================================================
   Portfolio landing — hero
   ========================================================================== */
.pf-hero {
  position: relative;
  padding: clamp(4rem, 10vh, 7rem) 0 2rem;
  overflow: hidden;
}
.pf-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(600px 420px at 15% 10%, var(--glow-accent-2), transparent 60%),
    radial-gradient(500px 380px at 90% 30%, var(--glow-accent-2), transparent 55%);
  pointer-events: none;
}
.pf-hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
}

.pf-hero-copy { min-width: 0; }

/* Portrait visual — fades in-toward the text from right to left */
.pf-hero-visual {
  position: relative;
  display: flex;
  justify-content: flex-end;
  /* width slightly overflows the column so the left bloom is visible */
  padding: 1.5rem 0;
}
.pf-visual-glow {
  position: absolute;
  top: 50%;
  right: 2%;
  width: min(46vw, 560px);
  aspect-ratio: 1 / 1;
  transform: translateY(-50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--glow-accent-2), transparent 70%);
  filter: blur(30px);
  opacity: .9;
  pointer-events: none;
}
.pf-visual-frame {
  position: relative;
  width: min(100%, 430px);
  aspect-ratio: 4 / 5;
  border-radius: 24px;
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--border-soft);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .8), 0 0 0 1px var(--glow-accent);
}
.pf-visual-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Left-to-right fade: portrait's left edge dissolves into the background,
     smoothly blending toward the text sitting on the left. */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 38%);
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-image: linear-gradient(to right, transparent 0%, #000 38%);
          mask-size: 100% 100%;
          mask-repeat: no-repeat;
}
/* faint bottom fade so the frame tucks into the section */
.pf-visual-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--color-bg) 0%, transparent 30%);
  pointer-events: none;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-display);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-accent-hover);
  border: 1px solid var(--glow-accent);
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
  padding: .4rem .9rem;
  border-radius: 999px;
}

.pf-hero h1 {
  margin: 1.4rem 0 0;
  font-size: clamp(2.4rem, 6vw, 4.4rem);
  font-weight: 700;
}
.pf-hero h1 .accent { color: var(--color-accent-hover); }

.pf-hero-lead {
  margin: 1.2rem 0 0;
  max-width: 640px;
  font-size: 1.15rem;
  color: var(--color-muted);
}
.pf-hero-lead strong { color: var(--color-text); }

.pf-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin-top: 2rem;
}

/* ==========================================================================
   Hero — small screens: text first, portrait becomes a smaller framed image
   below it (kept AFTER the base hero rules so it wins the cascade)
   ========================================================================== */
@media (max-width: 820px) {
  .site-nav { gap: 1rem; }
  .header-cta { display: none; }
  .pf-hero-inner { grid-template-columns: 1fr; }
  .pf-hero-visual {
    justify-content: center;
    width: 100%;
    padding: 0;
  }
  .pf-visual-glow { right: 50%; transform: translate(50%, -50%); }
  .pf-visual-frame { width: min(56vw, 260px); }
  .pf-visual-frame img {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 22%);
            mask-image: linear-gradient(to bottom, transparent 0%, #000 22%);
  }
}

/* ==========================================================================
   About
   ========================================================================== */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-top: 1rem;
}
.about-panel {
  border: 1px solid var(--border-soft);
  background: var(--gradient-card);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2.2rem);
}
.about-panel h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 1.2rem;
  color: var(--color-accent-hover);
}

.skill-list { display: grid; gap: 1rem; }

.skill-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: baseline;
}
.skill-name { font-weight: 500; }
.skill-level { font-size: .82rem; color: var(--color-muted); white-space: nowrap; }

/* ==========================================================================
   Category / project sections
   ========================================================================== */
.category { scroll-margin-top: 84px; }

.category-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.6rem;
}
.category-head h2 {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 600;
}
.category-head .category-note {
  font-size: .92rem;
  color: var(--color-muted);
}

.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.6rem;
}

/* ==========================================================================
   Project card
   ========================================================================== */
.pcard {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--gradient-card);
  border: 1px solid var(--border-soft);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
  display: flex;
  flex-direction: column;
}
.pcard:hover {
  transform: translateY(-4px);
  border-color: var(--glow-accent);
  box-shadow: 0 0 0 1px var(--glow-accent), var(--glow);
}
.pcard-media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background:
    radial-gradient(120% 120% at 30% 20%, var(--glow-accent-2), transparent 60%),
    var(--color-surface);
}
.pcard-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Branded placeholder used until real images are dropped in */
.pcard-media.is-ph img { object-fit: contain; padding: 1rem; opacity: .9; }
.pcard-body {
  padding: 1.1rem 1.25rem 1.3rem;
  display: flex;
  flex-direction: column;
  gap: .4rem;
  flex: 1;
}
.pcard-title { font-size: 1.1rem; font-weight: 600; }
.pcard-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-top: .35rem;
}
.pcard-filter-tag {
  font-family: var(--font-display);
  font-size: .7rem;
  font-weight: 600;
  color: var(--color-accent-hover);
  border: 1px solid var(--border-strong);
  background: color-mix(in srgb, var(--color-accent) 8%, transparent);
  padding: .14rem .5rem;
  border-radius: 999px;
}
.pcard-tag {
  position: absolute;
  top: .5rem;
  left: .5rem;
  z-index: 1;
  font-family: var(--font-display);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--color-text);
  background: rgba(5, 5, 5, .6);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: .2rem .55rem;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.pcard-desc {
  font-size: .9rem;
  color: var(--color-muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pcard-link-tag {
  margin-top: auto;
  padding-top: .7rem;
}
.pcard-link-tag span {
  font-family: var(--font-display);
  font-size: .82rem;
  font-weight: 600;
  color: var(--color-accent-hover);
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}

/* ==========================================================================
   Portfolio sorter — genre filter chips + group-by toggle
   ========================================================================== */
.sort-bar {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  margin-bottom: 2.8rem;
  padding: 1.25rem 1.3rem 1.35rem;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  background: var(--gradient-card);
}

.sort-group { display: flex; flex-direction: column; gap: .6rem; }

.sort-label {
  font-family: var(--font-display);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.genre-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.genre-chip-groups {
  display: flex;
  flex-direction: column;
  gap: .9rem;
}
.genre-kind {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.genre-kind-label {
  font-family: var(--font-display);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.genre-chip {
  font-family: var(--font-display);
  font-size: .85rem;
  font-weight: 600;
  padding: .42rem .95rem;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  color: var(--color-muted);
  background: transparent;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background .15s ease, transform .15s ease;
}
.genre-chip:hover {
  color: var(--color-text);
  border-color: var(--glow-accent);
  transform: translateY(-1px);
}
.genre-chip.is-active {
  color: var(--color-on-accent);
  background: var(--color-accent);
  border-color: var(--color-accent);
}

.sort-toggle {
  display: inline-flex;
  width: max-content;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  overflow: hidden;
}
.sort-toggle-btn {
  font-family: var(--font-display);
  font-size: .85rem;
  font-weight: 600;
  padding: .45rem 1.15rem;
  color: var(--color-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color .15s ease, background .15s ease;
}
.sort-toggle-btn + .sort-toggle-btn { border-left: 1px solid var(--border-strong); }
.sort-toggle-btn.is-active {
  color: var(--color-on-accent);
  background: var(--color-accent);
}
.sort-toggle-btn.is-active + .sort-toggle-btn { border-left-color: var(--color-accent); }

.sort-status {
  margin: 0;
  font-size: .88rem;
  color: var(--color-muted);
}

/* Filtered-out states (collections view) */
.category.is-filtered-out { display: none; }
.pcard.is-filtered-out { display: none; }
#review-marquee.is-filtered-out { display: none; }

/* Genre-grouped view */
.genre-view { display: none; }
.genre-view.is-active { display: block; }
.genre-view .genre-group { margin-top: 1.4rem; }

.sort-empty {
  display: none;
  text-align: center;
  padding: 3rem 0;
  font-size: 1rem;
  color: var(--color-muted);
}
.sort-empty.is-visible { display: block; }

@media (min-width: 900px) {
  .sort-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1.15rem 2.5rem;
    align-items: end;
  }
  .sort-status { grid-column: 1 / -1; }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 2rem 0;
}
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: .85rem;
  color: var(--color-muted);
}
.footer-nav {
  display: flex;
  gap: 1.5rem;
}
.footer-nav a { color: var(--color-muted); transition: color .15s ease; }
.footer-nav a:hover { color: var(--color-text); }

@media (max-width: 640px) {
  .about-grid { grid-template-columns: 1fr; }
  .footer-inner { flex-direction: column; align-items: flex-start; gap: .8rem; }
}

/* ==========================================================================
   Project detail page
   ========================================================================== */
.pd-hero {
  position: relative;
  padding: clamp(3rem, 6vh, 5rem) 0 1.5rem;
  overflow: hidden;
  text-align: center;
}
.pd-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(600px 420px at 20% 5%, var(--glow-accent-2), transparent 60%);
  pointer-events: none;
}
.pd-hero-inner { position: relative; z-index: 1; }

.pd-breadcrumb {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-size: .88rem;
  color: var(--color-muted);
  margin-bottom: 1.5rem;
}
.pd-breadcrumb a { color: var(--color-accent-hover); }
.pd-breadcrumb a:hover { text-decoration: underline; }
.pd-breadcrumb span { color: var(--color-text); }

.pd-category {
  display: inline-flex;
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-accent-hover);
  border: 1px solid var(--glow-accent);
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
  padding: .35rem .8rem;
  border-radius: 999px;
}

.pd-jam-tag {
  display: inline-flex;
  margin-left: .6rem;
  vertical-align: baseline;
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 600;
  color: var(--color-on-accent);
  background: var(--color-accent);
  border: 1px solid var(--color-accent);
  padding: .35rem .8rem;
  border-radius: 999px;
}

.pd-hero h1 {
  margin: 1.1rem 0 0;
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  font-weight: 700;
}
.pd-desc {
  margin: 1.1rem auto 0;
  max-width: 720px;
  font-size: 1.1rem;
  color: var(--color-muted);
}

.pd-gallery {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: clamp(3rem, 7vh, 4.5rem) 0;
  text-align: center;
}
.pd-gallery h2,
.pd-links h2 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 1.6rem;
  margin-top: 1.6rem;
  color: var(--color-accent-hover);
}
.pd-gallery h2:first-child { margin-top: 0; }

/* Hero / first screenshot framed like the showcase marquee */
.pd-shot-hero {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  padding: 1.2rem;
  background: var(--color-surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  box-shadow: 0 24px 50px -26px var(--card-shadow);
}
.pd-shot-hero.is-ph { padding: 2rem; }

.pd-shot-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: start;
  gap: 1.4rem;
  margin-top: 1.6rem;
}
/* Non-16:9 (portrait) screenshot grids pack shots smaller so they sit side by side */
.pd-shot-grid.is-compact .pd-shot {
  width: 240px;
}
.pd-shot {
  width: 560px;
  max-width: 100%;
  display: block;
  transform: scale(1);
  will-change: transform;
  border-radius: 14px;
  border: 1px solid var(--border-soft);
  cursor: zoom-in;
  background:
    radial-gradient(120% 120% at 30% 20%, var(--glow-accent-2), transparent 60%),
    var(--color-surface);
  transition: transform .28s cubic-bezier(.2, .7, .3, 1), border-color .2s ease;
}
.pd-shot:hover { transform: scale(1.03); border-color: var(--glow-accent); }

.pd-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border-soft);
  background:
    radial-gradient(120% 120% at 30% 20%, var(--glow-accent-2), transparent 60%),
    var(--color-surface);
  margin-bottom: 1.4rem;
}
.pd-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.pd-review {
  border-top: 1px solid var(--border);
  text-align: center;
  padding: clamp(3rem, 7vh, 4.5rem) 0;
}
.pd-review h2 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 1.6rem;
  color: var(--color-accent-hover);
}
.pd-review-link { display: block; max-width: 720px; margin-inline: auto; }
.pd-review-media {
  display: block;
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  border-radius: calc(var(--radius) - 4px);
  border: 1px solid var(--border-soft);
  background: var(--color-surface);
  cursor: zoom-in;
  will-change: transform;
  transition: border-color .2s ease, transform .28s cubic-bezier(.2, .7, .3, 1);
}
.pd-review-link:hover .pd-review-media { transform: scale(1.02); border-color: var(--glow-accent); }

/* "Click to verify" tooltip that follows the cursor over review images */
.pd-tooltip {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  padding: .32rem .75rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .03em;
  white-space: nowrap;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--glow-accent);
  border-radius: 999px;
  box-shadow: 0 6px 20px -8px var(--card-shadow);
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px) scale(.92);
  transition: opacity .2s ease, transform .2s ease;
}
.pd-tooltip.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Client-review marquee on the portfolio home page — copied verbatim from the
   mentorship page (styles.css), so the spotlight scaling, drag, glow and
   "Click to verify" tooltip behave EXACTLY the same. Scoped to #review-marquee. */
.marquee {
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y; /* horizontal drag captured here, vertical page scroll still works */
  /* headroom so the hover glow isn't clipped by the overflow mask */
  padding: clamp(1.5rem, 4vw, 2.5rem) 0;
  margin: calc(clamp(1.5rem, 4vw, 2.5rem) * -1) 0;
  /* Fade edges so cards dissolve into the background */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.marquee.is-dragging { cursor: grabbing; }

.marquee-track {
  display: flex;
  gap: var(--marquee-gap, 1.75rem);
  width: max-content;
  will-change: transform;
}

/* Spotlight variant — cards scale up as they approach the centre. The extra
   vertical headroom keeps the enlarged centre card AND its hover glow from
   being clipped at the marquee's overflow edge (which sits at the next section). */
.marquee-spotlight {
  padding: clamp(4rem, 10vw, 7rem) 0;
  margin: calc(clamp(4rem, 10vw, 7rem) * -1) 0;
}
.marquee-spotlight .proof-card {
  transition: none;
  will-change: scale;
}
/* Review marquee: keep the image's natural ratio so nothing gets cropped.
   No glow by default; heaviest hover glow removed too. The image is padded
   inward so there's breathing room inside the frame on all corners. */
#review-marquee .proof-media {
  aspect-ratio: auto;
  object-fit: contain;
  padding: 1.2rem;
  background: var(--color-surface);
  border: 1px solid var(--border-soft);
  box-shadow: 0 10px 24px -18px var(--card-shadow);
}
#review-marquee .proof-card::before { opacity: 0; }
#review-marquee .proof-card.is-hover::before { opacity: .12; }
#review-marquee .proof-card.is-hover .proof-media {
  transform: scale(1.06);
  border-color: var(--border-strong);
  box-shadow: 0 0 10px var(--glow-accent-2), 0 14px 30px -20px var(--card-shadow);
}
/* Center the review bar in the gap between the section title and the project
   grid: trim the spotlight variant's oversized headroom to a modest pad and
   offset the category-head's 1.6rem bottom margin so the strip sits centered. */
#review-marquee {
  padding: clamp(2.75rem, 5vw, 4rem) 0;
  margin: -1.6rem 0 0;
}

.proof-card {
  position: relative;
  flex-shrink: 0;
  width: clamp(230px, 24vw, 320px);
  user-select: none;
  -webkit-user-select: none;
}

/* Purple gradient halo behind the image — lights up on hover */
.proof-card::before {
  content: "";
  position: absolute;
  top: -7%;
  left: -8%;
  right: -8%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  background:
    radial-gradient(90% 90% at 50% 45%, var(--color-accent) 0%, var(--glow-accent) 45%, transparent 78%);
  filter: blur(22px);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}
.proof-card.is-hover::before { opacity: .75; }

.proof-link {
  position: relative;
  z-index: 1;
  display: block;
  cursor: pointer;
}

/* Caption is invisible to the cursor: hover/pause/tooltip only trigger
   when actually over the image itself */
.proof-link figcaption {
  pointer-events: none;
}

/* "Click to verify" tooltip that follows the cursor over proof cards */
.proof-tooltip {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  padding: .32rem .75rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .03em;
  white-space: nowrap;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--glow-accent);
  border-radius: 999px;
  box-shadow: 0 6px 20px -8px var(--card-shadow);
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px) scale(.92);
  transition: opacity .2s ease, transform .2s ease;
}
.proof-tooltip.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.proof-media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--border-soft);
  background:
    radial-gradient(120% 120% at 30% 20%, var(--glow-accent-2), transparent 60%),
    var(--color-surface);
  box-shadow: 0 22px 44px -20px var(--card-shadow);
  /* receives pointer events so hover/pause only trigger over the image
     (native drag is already disabled via draggable=false + pointerdown preventDefault) */
  transition: transform .35s cubic-bezier(.2, .8, .3, 1), box-shadow .35s ease;
}
.proof-card.is-hover .proof-media {
  transform: scale(1.06);
  border-color: var(--glow-accent);
  box-shadow:
    0 0 24px var(--glow-accent),
    0 30px 60px -22px var(--card-shadow);
}
.proof-media.is-missing {
  visibility: visible;
  border-style: dashed;
  opacity: .55;
}

@media (prefers-reduced-motion: reduce) {
  .marquee { cursor: default; }
}

/* Lightbox — click a screenshot to view it larger */
.pd-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vh 4vw;
  background: rgba(5, 5, 5, .92);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.pd-lightbox.is-open { opacity: 1; pointer-events: auto; }
.pd-lightbox-img {
  max-width: 92vw;
  max-height: 86vh;
  border-radius: 12px;
  border: 1px solid var(--border-soft);
  box-shadow: 0 30px 90px -25px rgba(0, 0, 0, .9);
}
.pd-lightbox-close {
  position: absolute;
  top: 1.2rem;
  right: 1.4rem;
  width: 2.6rem;
  height: 2.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--border-soft);
  border-radius: 50%;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.pd-lightbox-close:hover { color: var(--color-accent-hover); border-color: var(--glow-accent); }
.pd-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  line-height: 1;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--border-soft);
  border-radius: 50%;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.pd-lightbox-nav:hover { color: var(--color-accent-hover); border-color: var(--glow-accent); }
.pd-lightbox-prev { left: 1.2rem; }
.pd-lightbox-next { right: 1.2rem; }
.pd-lightbox-count {
  position: absolute;
  bottom: 1.2rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: .9rem;
  color: var(--color-muted);
}
body.is-lb-open { overflow: hidden; }

.pd-links {
  padding: clamp(3rem, 7vh, 4.5rem) 0;
  text-align: center;
}
.pd-link-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .9rem;
}
.pd-link-list a {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .7rem 1.3rem;
  border-radius: 999px;
  border: 1px solid var(--color-accent-2);
  color: var(--color-accent-2);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .92rem;
  transition: all .2s ease;
}
.pd-link-list a:hover {
  background: var(--color-hover);
  color: var(--color-on-accent);
  box-shadow: var(--glow);
}

.pd-cta {
  border-top: 1px solid var(--border);
  text-align: center;
  padding: clamp(3.5rem, 8vh, 5rem) 0;
}
.pd-cta h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 700; }
.pd-cta p { color: var(--color-muted); margin: .8rem 0 1.6rem; }
.pd-cta .btn { margin-inline: auto; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}