/* ==========================================================================
   MEMBER PORTFOLIO PAGE  (single-adphase_member.php → /team/{slug}/)
   Uses the theme tokens only, so colours/fonts follow Dashboard → الهوية والتصميم.
   ========================================================================== */
.pf{ overflow-x:clip; }
.pf-sec{ padding-block:clamp(4rem, 8vw, 7rem); position:relative; }
.pf-eyebrow{
  display:inline-flex; align-items:center; gap:.6em;
  font-size:var(--fs-micro); font-weight:700; letter-spacing:.04em;
  color:var(--brand-strong);
}
.pf-eyebrow b{ font-family:var(--font-latin); font-weight:700; }
.pf-h2{ font-size:var(--fs-h2); margin:.25em 0 .35em; }
.pf-muted{ color:var(--ink-soft); max-width:60ch; margin:0; }
.pf-actions{ display:flex; flex-wrap:wrap; gap:var(--sp-3); }

/* section head: giant outlined number + title */
.pf-shead{ display:flex; align-items:flex-end; gap:clamp(1rem, 3vw, 2.5rem); margin-bottom:clamp(2rem, 4vw, 3rem); }
.pf-no{
  font-family:var(--font-latin); font-weight:800; line-height:.8;
  font-size:clamp(4rem, 2.5rem + 6vw, 8.5rem);
  color:transparent; -webkit-text-stroke:1.5px color-mix(in srgb, var(--brand) 55%, transparent);
  letter-spacing:-.04em; flex-shrink:0;
}

/* ================================================================= HERO */
.pf-hero{
  position:relative; isolation:isolate; overflow:hidden;
  min-height:min(100svh, 980px);
  display:flex; flex-direction:column; justify-content:center;
  padding-top:calc(var(--header-h) + clamp(1.5rem, 4vw, 3rem));
  padding-bottom:clamp(4rem, 7vw, 6rem);
}
.pf-hero__grid{                          /* faint blueprint grid, fading out */
  position:absolute; inset:0; z-index:-2;
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--ink) 6%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--ink) 6%, transparent) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(70% 70% at 35% 45%, #000 20%, transparent 75%);
          mask-image:radial-gradient(70% 70% at 35% 45%, #000 20%, transparent 75%);
}
.pf-hero__glow{
  position:absolute; z-index:-2; width:60vmax; height:60vmax; inset-inline-end:-18vmax; top:-14vmax;
  background:radial-gradient(circle, color-mix(in srgb, var(--brand) 22%, transparent), transparent 62%);
  filter:blur(10px);
  animation:pfGlow 9s ease-in-out infinite alternate;
}
.pf-hero__bg{
  position:absolute; inset:0; z-index:-3;
  background-size:cover; background-position:center;
  opacity:.28; mix-blend-mode:luminosity;
  -webkit-mask-image:linear-gradient(to bottom, #000 40%, transparent);
          mask-image:linear-gradient(to bottom, #000 40%, transparent);
}
:root[data-theme="light"] .pf-hero__bg{ opacity:.08; }
@keyframes pfGlow{ to{ transform:translate(-6vmax, 4vmax) scale(1.1); } }

.pf-hero__in{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1.05fr);
  gap:clamp(2rem, 4vw, 4rem);
  align-items:center;
}

.pf-pill{
  display:inline-flex; align-items:center; gap:.6em;
  padding:.5em 1em .5em 1.1em; border-radius:999px;
  background:var(--glass-bg-2); border:1px solid var(--glass-border);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  font-size:var(--fs-micro); font-weight:700; color:var(--ink-soft);
}
.pf-pill i{ width:8px; height:8px; border-radius:50%; background:var(--brand); box-shadow:0 0 0 4px color-mix(in srgb, var(--brand) 22%, transparent); animation:pfPulse 2s infinite; }
.pf-pill em{ font-style:normal; font-family:var(--font-latin); color:var(--brand-strong); }
@keyframes pfPulse{ 50%{ box-shadow:0 0 0 7px color-mix(in srgb, var(--brand) 0%, transparent); } }

.pf-name{
  font-size:clamp(2.4rem, 1.5rem + 3.4vw, 4.4rem);
  line-height:1.02; letter-spacing:-.01em;
  margin:.35em 0 .2em;
}
.pf-role{
  margin:0 0 var(--sp-5);
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(1.15rem, .95rem + 1vw, 1.75rem); line-height:1.3;
  background:linear-gradient(90deg, var(--brand), color-mix(in srgb, var(--brand) 40%, var(--ink)));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.pf-summary{ color:var(--ink-soft); font-size:var(--fs-lead); max-width:50ch; margin:0 0 var(--sp-6); line-height:1.85; }
.pf-hstats{ list-style:none; margin:clamp(2rem, 4vw, 3rem) 0 0; padding:0; display:flex; flex-wrap:wrap; gap:0; }
.pf-hstats li{ padding-inline:clamp(1rem, 2.4vw, 2rem); border-inline-start:1px solid var(--line-strong); }
.pf-hstats li:first-child{ padding-inline-start:0; border-inline-start:0; }
.pf-hstats b{ display:block; font-family:var(--font-latin); font-weight:800; font-size:clamp(1.8rem, 1.3rem + 1.6vw, 2.7rem); line-height:1; color:var(--ink); }
.pf-hstats span{ display:block; margin-top:.45em; font-size:var(--fs-micro); color:var(--ink-faint); }
.pf-links{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:var(--sp-5); }
.pf-links a{ display:inline-flex; align-items:center; gap:.5em; padding:.55em 1.1em .55em .9em; border-radius:999px; background:var(--glass-bg-2); border:1px solid var(--glass-border); color:var(--ink); font-family:var(--font-latin); font-size:var(--fs-small); font-weight:700; transition:border-color var(--dur-fast), background var(--dur-fast), color var(--dur-fast), transform var(--dur-fast); }
.pf-links a svg{ color:var(--brand-strong); flex-shrink:0; }
.pf-links a:hover{ border-color:var(--brand-line); background:var(--brand-wash); transform:translateY(-2px); }

/* ---- stage ---- */
.pf-stage{
  --rx:0; --ry:0;
  position:relative;
  aspect-ratio:1 / .92;
  perspective:1600px;
  transform-style:preserve-3d;
}
.pf-orbit{ position:absolute; inset:-6% -4%; width:108%; height:112%; z-index:0; animation:pfSpin 40s linear infinite; }
.pf-orbit circle{ fill:none; stroke:color-mix(in srgb, var(--brand) 22%, transparent); stroke-width:1; stroke-dasharray:3 9; }
.pf-orbit circle + circle{ stroke-dasharray:none; stroke:color-mix(in srgb, var(--ink) 7%, transparent); }
.pf-orbit .pf-orbit__dot{ fill:var(--brand); stroke:none; filter:drop-shadow(0 0 6px var(--brand)); }
@keyframes pfSpin{ to{ transform:rotate(360deg); } }

.pf-win{
  position:absolute; z-index:2;
  width:66%;
  border-radius:16px; overflow:hidden;
  background:#0b140e;
  border:1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  box-shadow:0 40px 80px -30px rgba(0,0,0,.75), 0 0 0 1px rgba(0,0,0,.2);
  transition:transform .6s var(--ease-out);
  will-change:transform;
}
.pf-win img{ display:block; width:100%; aspect-ratio:16 / 10; object-fit:cover; object-position:top; }
.pf-win__bar, .pf-code__bar{ display:flex; align-items:center; gap:5px; height:26px; padding-inline:11px; background:#121e17; }
.pf-win__bar i, .pf-code__bar i{ width:8px; height:8px; border-radius:50%; background:#2b3a31; }
.pf-win__bar i:first-child, .pf-code__bar i:first-child{ background:#ff6b5e; }
.pf-win__bar i:nth-child(2), .pf-code__bar i:nth-child(2){ background:#f6c344; }
.pf-win__bar i:nth-child(3), .pf-code__bar i:nth-child(3){ background:#4fd06a; }
.pf-win__bar span, .pf-code__bar span{ flex:1; text-align:center; font-family:var(--font-latin); font-size:.68rem; color:#7E8C82; }

/* three windows in depth, each reacting a bit differently to the pointer */
.pf-win--1{ inset-inline-start:2%; top:6%;  transform:translate3d(calc(var(--ry) * -18px), calc(var(--rx) * -14px), 0) rotateY(calc(-14deg + var(--ry) * 10deg)) rotateX(calc(6deg - var(--rx) * 8deg)); animation:pfFloat 7s ease-in-out infinite; opacity:.55; filter:saturate(.7); width:58%; }
.pf-win--2{ inset-inline-end:0;   top:16%; transform:translate3d(calc(var(--ry) * 22px), calc(var(--rx) * 16px), 40px) rotateY(calc(-8deg + var(--ry) * 12deg)) rotateX(calc(4deg - var(--rx) * 10deg)); animation:pfFloat 8s ease-in-out -2s infinite; z-index:3; }
.pf-win--3{ inset-inline-end:8%; bottom:0; transform:translate3d(calc(var(--ry) * -30px), calc(var(--rx) * -22px), 90px) rotateY(calc(-4deg + var(--ry) * 14deg)) rotateX(calc(2deg - var(--rx) * 12deg)); animation:pfFloat 6.5s ease-in-out -4s infinite; z-index:4; width:56%; }
:root[dir="rtl"] .pf-win--1{ transform:translate3d(calc(var(--ry) * -18px), calc(var(--rx) * -14px), 0) rotateY(calc(14deg + var(--ry) * 10deg)) rotateX(calc(6deg - var(--rx) * 8deg)); }
:root[dir="rtl"] .pf-win--2{ transform:translate3d(calc(var(--ry) * 22px), calc(var(--rx) * 16px), 40px) rotateY(calc(8deg + var(--ry) * 12deg)) rotateX(calc(4deg - var(--rx) * 10deg)); }
:root[dir="rtl"] .pf-win--3{ transform:translate3d(calc(var(--ry) * -30px), calc(var(--rx) * -22px), 90px) rotateY(calc(4deg + var(--ry) * 14deg)) rotateX(calc(2deg - var(--rx) * 12deg)); }
@keyframes pfFloat{ 50%{ translate:0 -12px; } }

.pf-code{
  position:absolute; z-index:5;
  inset-inline-start:-4%; bottom:14%;
  width:min(320px, 54%);
  border-radius:14px; overflow:hidden;
  background:color-mix(in srgb, #0b140e 82%, transparent);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border:1px solid color-mix(in srgb, var(--brand) 30%, transparent);
  box-shadow:0 30px 60px -25px rgba(0,0,0,.8), 0 0 40px -16px color-mix(in srgb, var(--brand) 60%, transparent);
  transform:translate3d(calc(var(--ry) * 26px), calc(var(--rx) * 20px), 120px);
  transition:transform .6s var(--ease-out);
  animation:pfFloat 7.5s ease-in-out -1s infinite;
  text-align:left;
}
.pf-code pre{ margin:0; padding:14px 16px 16px; font-family:ui-monospace, 'SFMono-Regular', Consolas, monospace; font-size:clamp(.68rem, .6rem + .25vw, .82rem); line-height:1.75; color:#B9C4BB; white-space:pre-wrap; }
.pf-code .k{ color:#c792ea; } .pf-code .v{ color:#82aaff; } .pf-code .p{ color:#EEF1EA; }
.pf-code .s{ color:var(--brand); } .pf-code .n{ color:#f78c6c; } .pf-code .b{ color:#ffcb6b; }
.pf-caret{ display:inline-block; width:7px; height:1.05em; margin-inline-start:3px; vertical-align:-2px; background:var(--brand); animation:pfBlink 1.1s steps(1) infinite; }
@keyframes pfBlink{ 50%{ opacity:0; } }

.pf-avatar{
  position:absolute; z-index:6;
  inset-inline-start:0; top:-1%;
  display:flex; align-items:center; gap:.7rem;
  padding:.45rem 1.1rem .45rem .45rem;
  border-radius:999px;
  background:color-mix(in srgb, var(--bg-elevated) 80%, transparent);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border:1px solid var(--glass-border);
  box-shadow:var(--shadow-2);
  transform:translate3d(calc(var(--ry) * -16px), calc(var(--rx) * -12px), 140px);
  transition:transform .6s var(--ease-out);
  animation:pfFloat 6s ease-in-out -3s infinite;
}
.pf-avatar__img{ width:46px; height:46px; border-radius:50%; overflow:hidden; display:grid; place-items:center; background:linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand) 50%, #0b1a0f)); color:var(--on-brand); flex-shrink:0; }
.pf-avatar__img img{ width:100%; height:100%; object-fit:cover; }
.pf-avatar__img b{ font-family:var(--font-latin); font-weight:800; font-size:1rem; }
.pf-avatar__txt b{ display:block; font-size:var(--fs-small); line-height:1.3; }
.pf-avatar__txt small{ display:flex; align-items:center; gap:.4em; font-size:.75rem; color:var(--ink-soft); }
.pf-avatar__txt small i{ width:7px; height:7px; border-radius:50%; background:#4fd06a; box-shadow:0 0 8px #4fd06a; }

.pf-scroll{ position:absolute; bottom:clamp(1rem, 3vw, 2rem); left:50%; transform:translateX(-50%); width:26px; height:42px; border-radius:20px; border:1.5px solid var(--line-strong); display:flex; justify-content:center; padding-top:8px; }
.pf-scroll span{ width:3px; height:8px; border-radius:3px; background:var(--brand); animation:pfScroll 1.8s ease-in-out infinite; }
@keyframes pfScroll{ 0%{ transform:translateY(0); opacity:1; } 80%{ transform:translateY(14px); opacity:0; } 100%{ opacity:0; } }

/* ================================================================= MARQUEE */
.pf-marquee{
  padding-block:clamp(1rem, 2vw, 1.4rem);
  border-block:1px solid var(--line);
  background:color-mix(in srgb, var(--bg-elevated) 60%, transparent);
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  transform:rotate(-1.2deg) scale(1.02);
  margin-block:-.5rem;
}
.pf-marquee__row{ display:flex; overflow:hidden; direction:ltr; }
.pf-marquee__row + .pf-marquee__row{ margin-top:.55rem; }
.pf-marquee__track{ display:flex; align-items:center; gap:1.1rem; flex-shrink:0; padding-inline-end:1.1rem; animation:pfMarquee 55s linear infinite; }
.pf-marquee__row.is-rev .pf-marquee__track{ animation-direction:reverse; animation-duration:65s; }
.pf-marquee span{ font-family:var(--font-latin); font-weight:800; font-size:clamp(1.05rem, .8rem + 1vw, 1.7rem); white-space:nowrap; color:var(--ink); }
.pf-marquee__row.is-rev span{ color:transparent; -webkit-text-stroke:1px color-mix(in srgb, var(--ink) 45%, transparent); }
.pf-marquee i{ font-style:normal; color:var(--brand); font-size:.9rem; }
@keyframes pfMarquee{ to{ transform:translateX(-50%); } }

/* ================================================================= ABOUT (bento) */
.pf-tile{
  position:relative;
  background:var(--bg-elevated);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:clamp(1.4rem, 2.6vw, 2.2rem);
  overflow:hidden;
}
.pf-tile h3{ font-size:var(--fs-h3); margin:0 0 var(--sp-5); }
.pf-bento{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:clamp(.8rem, 1.6vw, 1.25rem);
}
.pf-tile--bio{ grid-column:span 2; grid-row:span 2; display:flex; flex-direction:column; justify-content:center; }
.pf-tile--bio::before{ content:"”"; position:absolute; inset-inline-end:1.2rem; top:-1.4rem; font-size:9rem; line-height:1; font-family:Georgia, serif; color:color-mix(in srgb, var(--brand) 20%, transparent); }
.pf-quote{ font-family:var(--font-display); font-weight:700; font-size:clamp(1.15rem, .95rem + .8vw, 1.6rem); line-height:1.65; color:var(--ink); margin:0 0 var(--sp-4); }
.pf-tile--bio p:not(.pf-quote){ color:var(--ink-soft); line-height:1.9; margin:0 0 .8em; }
.pf-tile--stat{ display:flex; flex-direction:column; justify-content:space-between; min-height:150px; }
.pf-tile--stat b{ font-family:var(--font-latin); font-weight:800; font-size:clamp(2.2rem, 1.5rem + 2.2vw, 3.4rem); line-height:1; }
.pf-tile--stat span{ color:var(--ink-soft); font-size:var(--fs-small); margin-top:var(--sp-4); }
.pf-tile--stat.is-lime{ background:var(--brand); border-color:var(--brand); }
.pf-tile--stat.is-lime b, .pf-tile--stat.is-lime span{ color:var(--on-brand); }
.pf-tile--ach{ grid-column:span 2; }
.pf-tile--skills{ grid-column:span 2; }
.pf-ach{ list-style:none; margin:0; padding:0; display:grid; gap:var(--sp-3); }
.pf-ach li{ display:grid; grid-template-columns:26px 1fr; gap:var(--sp-3); align-items:start; color:var(--ink-soft); line-height:1.75; }
.pf-ach li i{ width:26px; height:26px; border-radius:50%; display:grid; place-items:center; background:var(--brand-wash); border:1px solid var(--brand-line); color:var(--brand-strong); }
.pf-ach li i svg{ width:13px; height:13px; }
.pf-skillgrp + .pf-skillgrp{ margin-top:var(--sp-4); }
.pf-skillgrp small{ display:block; margin-bottom:.55rem; color:var(--ink-faint); font-size:var(--fs-micro); font-weight:700; }
.pf-skillgrp div{ display:flex; flex-wrap:wrap; gap:.4rem; }
.pf-skillgrp span{
  padding:.38em .95em; border-radius:999px;
  font-family:var(--font-latin); font-size:var(--fs-micro); font-weight:600;
  background:var(--glass-bg-2); border:1px solid var(--line-strong); color:var(--ink);
  transition:border-color var(--dur-fast), background var(--dur-fast);
}
.pf-skillgrp span:hover{ border-color:var(--brand-line); background:var(--brand-wash); }

/* ================================================================= WORKS */
.pf-filter{
  position:relative; isolation:isolate;
  display:inline-flex; flex-wrap:wrap; gap:.25rem;
  padding:.35rem; margin-bottom:clamp(1.5rem, 3vw, 2.25rem);
  border-radius:999px; background:var(--glass-bg); border:1px solid var(--line-strong);
}
.pf-filter__ink{ position:absolute; z-index:-1; left:0; top:.35rem; bottom:.35rem; width:0; border-radius:999px; background:var(--brand); box-shadow:var(--brand-glow-sm); transition:transform .45s var(--ease-out), width .45s var(--ease-out); }
.pf-filter button{
  display:inline-flex; align-items:center; gap:.5em;
  padding:.6em 1.15em; border-radius:999px; cursor:pointer;
  font:inherit; font-size:var(--fs-small); font-weight:700;
  color:var(--ink-soft); background:none; border:0;
  transition:color .3s;
}
.pf-filter button i{ font-style:normal; font-family:var(--font-latin); font-size:.78em; opacity:.65; }
.pf-filter button:hover{ color:var(--ink); }
.pf-filter button.is-active{ color:var(--on-brand); }

.pf-grid{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); grid-auto-flow:dense; gap:clamp(1rem, 2vw, 1.5rem); }
.pf-work{
  --mx:50%; --my:50%;
  position:relative; isolation:isolate;
  display:flex; flex-direction:column;
  border-radius:var(--r-lg);
  background:var(--bg-elevated);
  border:1px solid var(--line);
  color:var(--ink); text-decoration:none;
  overflow:hidden;
  transition:transform .5s var(--ease-out), border-color .3s, box-shadow .5s var(--ease-out);
}
.pf-work::before{               /* glow that follows the pointer */
  content:""; position:absolute; inset:0; z-index:-1; opacity:0; transition:opacity .4s;
  background:radial-gradient(420px circle at var(--mx) var(--my), color-mix(in srgb, var(--brand) 16%, transparent), transparent 60%);
}
.pf-work[hidden]{ display:none; }
.pf-work.is-wide{ grid-column:span 2; }
a.pf-work:hover{ transform:translateY(-6px); border-color:var(--brand-line); box-shadow:var(--shadow-2); }
a.pf-work:hover::before{ opacity:1; }
.pf-work__frame{ position:relative; margin:10px 10px 0; border-radius:calc(var(--r-lg) - 8px); overflow:hidden; background:#07100B; border:1px solid var(--line); }
.pf-work__bar{ display:flex; align-items:center; gap:5px; height:26px; padding-inline:10px; background:#111c15; }
.pf-work__bar i{ width:7px; height:7px; border-radius:50%; background:#2b3a31; }
.pf-work__bar span{ flex:1; text-align:center; font-family:var(--font-latin); font-size:.68rem; color:#7E8C82; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pf-work__shot{ position:relative; height:clamp(190px, 17vw, 250px); overflow:hidden; }
.pf-work__shot img{ width:100%; height:100%; object-fit:cover; object-position:top; display:block; transition:transform 1.2s var(--ease-out); }
a.pf-work:hover .pf-work__shot img{ transform:scale(1.06); }
.pf-work__visit{
  position:absolute; inset-inline-end:12px; top:12px;
  width:42px; height:42px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--brand); color:var(--on-brand);
  transform:scale(.4) rotate(-45deg); opacity:0;
  transition:transform .45s var(--ease-out), opacity .3s;
  box-shadow:var(--brand-glow-sm);
}
a.pf-work:hover .pf-work__visit{ transform:none; opacity:1; }
.pf-work__ph{ height:100%; display:grid; place-content:center; justify-items:center; gap:.4rem; background:radial-gradient(60% 70% at 50% 40%, color-mix(in srgb, var(--brand) 18%, transparent), transparent 70%), linear-gradient(135deg, #0f1d15, #0a140e); }
.pf-work__ph b{ font-size:3rem; line-height:1; color:var(--brand); font-family:var(--font-display); }
.pf-work__ph span{ font-family:var(--font-latin); font-size:var(--fs-micro); color:#B9C4BB; }
.pf-work__note{
  position:absolute; inset-inline-start:10px; bottom:10px;
  padding:.35em .85em; border-radius:999px;
  background:color-mix(in srgb, #0b1a0f 78%, transparent);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid color-mix(in srgb, var(--brand) 40%, transparent);
  color:#EEF1EA; font-size:.75rem; font-weight:700;
}
.pf-work__body{ display:flex; align-items:flex-start; gap:var(--sp-4); padding:var(--sp-4) var(--sp-5) var(--sp-5); }
.pf-work__idx{ font-family:var(--font-latin); font-weight:800; font-size:1.6rem; line-height:1; color:transparent; -webkit-text-stroke:1px var(--line-strong); transition:-webkit-text-stroke-color .3s; }
a.pf-work:hover .pf-work__idx{ -webkit-text-stroke-color:var(--brand); }
.pf-work__tags{ display:flex; flex-wrap:wrap; gap:.35rem; margin-bottom:.25rem; }
.pf-work__tags span{ font-size:.75rem; font-weight:700; color:var(--brand-strong); }
.pf-work__tags span + span::before{ content:"·"; margin-inline-end:.35rem; color:var(--ink-faint); }
.pf-work h3{ font-size:1.15rem; margin:0; font-family:var(--font-latin); }
.pf-work p{ margin:.25rem 0 0; color:var(--ink-soft); font-size:var(--fs-small); line-height:1.7; }

/* ================================================================= JOURNEY */
.pf-cv{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(1rem, 2vw, 1.5rem); align-items:start; }
.pf-tl{ list-style:none; margin:0; padding:0; position:relative; counter-reset:tl; }
.pf-tl::before{ content:""; position:absolute; inset-block:10px; inset-inline-start:15px; width:1px; background:linear-gradient(var(--brand), var(--line-strong)); }
.pf-tl li{ position:relative; padding-inline-start:3.2rem; padding-bottom:var(--sp-5); counter-increment:tl; }
.pf-tl li:last-child{ padding-bottom:0; }
.pf-tl li::before{
  content:counter(tl, decimal-leading-zero);
  position:absolute; inset-inline-start:0; top:0;
  width:31px; height:31px; border-radius:50%;
  display:grid; place-items:center;
  font-family:var(--font-latin); font-size:.7rem; font-weight:800;
  background:var(--bg-elevated); border:1.5px solid var(--brand); color:var(--brand-strong);
  box-shadow:0 0 14px color-mix(in srgb, var(--brand) 35%, transparent);
}
.pf-tl small{ display:inline-block; padding:.15em .7em; border-radius:999px; background:var(--glass-bg-2); color:var(--ink-faint); font-size:.75rem; }
.pf-tl b{ display:block; font-size:var(--fs-body); margin:.35em 0 .1em; }
.pf-tl span{ color:var(--ink-soft); font-size:var(--fs-small); }
.pf-certs{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:var(--sp-3); }
.pf-certs li{ padding:var(--sp-3) var(--sp-4); border-radius:var(--r-sm); background:var(--bg-soft); border:1px solid var(--line); border-inline-start:2px solid var(--brand); }
.pf-certs b{ display:block; font-size:var(--fs-small); }
.pf-certs span{ color:var(--ink-faint); font-size:var(--fs-micro); }

/* ================================================================= END CTA */
.pf-end{
  position:relative; overflow:hidden; text-align:center; isolation:isolate;
  padding:clamp(3rem, 7vw, 5.5rem) var(--sp-5);
  border-radius:calc(var(--r-lg) + 8px);
  border:1px solid var(--brand-line);
  background:
    radial-gradient(60% 90% at 50% 0%, color-mix(in srgb, var(--brand) 20%, transparent), transparent 70%),
    var(--bg-elevated);
}
.pf-end__word{
  position:absolute; z-index:-1; left:50%; bottom:-.18em; transform:translateX(-50%);
  font-family:var(--font-latin); font-weight:900; white-space:nowrap;
  font-size:clamp(4rem, 2rem + 9vw, 11rem); line-height:1;
  color:transparent; -webkit-text-stroke:1px color-mix(in srgb, var(--brand) 25%, transparent);
}
.pf-end h2{ font-size:var(--fs-h2); margin:0 0 .4em; }
.pf-end p{ color:var(--ink-soft); max-width:52ch; margin:0 auto var(--sp-6); }
.pf-end .pf-actions{ justify-content:center; }

/* reveal on scroll */
.pf-rise{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.pf-rise.is-in{ opacity:1; transform:none; }

/* ================================================================= RESPONSIVE */
@media (max-width: 1100px){
  .pf-hero__in{ grid-template-columns:1fr; }
  .pf-stage{ max-width:620px; width:100%; margin-inline:auto; }
  .pf-bento{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .pf-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .pf-cv{ grid-template-columns:1fr; }
}
@media (max-width: 640px){
  .pf-hero{ min-height:0; }
  .pf-hstats{ flex-wrap:nowrap; }
  .pf-hstats li{ padding-inline:.75rem; flex:1; }
  .pf-hstats b{ font-size:1.6rem; }
  .pf-stage{ aspect-ratio:1 / .9; margin-top:var(--sp-4); }
  .pf-win--1, .pf-win--3{ display:none; }
  .pf-win--2{ width:88%; top:16%; inset-inline-end:0; }
  .pf-code{ width:76%; inset-inline-start:0; bottom:0; }
  .pf-avatar{ top:0; inset-inline-start:0; }
  .pf-scroll{ display:none; }
  .pf-shead{ flex-direction:column; align-items:flex-start; gap:.3rem; }
  .pf-bento{ grid-template-columns:1fr 1fr; }
  .pf-tile--bio, .pf-tile--ach, .pf-tile--skills{ grid-column:1 / -1; }
  .pf-tile--stat{ min-height:120px; }
  .pf-grid{ grid-template-columns:1fr; }
  .pf-work.is-wide{ grid-column:auto; }
  .pf-filter{ display:flex; flex-wrap:nowrap; overflow-x:auto; border-radius:18px; scrollbar-width:none; }
  .pf-filter button{ flex-shrink:0; }
}
@media (prefers-reduced-motion: reduce){
  .pf-hero__glow, .pf-orbit, .pf-win, .pf-code, .pf-avatar, .pf-marquee__track, .pf-pill i, .pf-caret, .pf-scroll span{ animation:none !important; }
}