/* Inner-page hero — text + motion panels (no photos) */
.ph-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:2rem;align-items:center}
.ph-copy{position:relative;z-index:2}
.ph-orb{position:absolute;border-radius:50%;filter:blur(34px);pointer-events:none;z-index:0;animation:glowPulse 4s ease-in-out infinite}
.ph-orb.y{width:180px;height:180px;background:rgba(249,206,3,.22);right:-40px;top:8%}
.ph-orb.g{width:140px;height:140px;background:rgba(101,180,1,.2);left:-30px;bottom:0;animation-delay:-1s}

.ph-stage{
  position:relative;
  min-height:320px;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(ellipse at 20% 20%, rgba(249,206,3,.16), transparent 45%),
    radial-gradient(ellipse at 80% 80%, rgba(101,180,1,.14), transparent 40%),
    linear-gradient(160deg, rgba(255,255,255,.04), rgba(5,5,5,.35));
  display:flex;flex-direction:column;justify-content:center;padding:1.5rem;
}
.ph-stage::before{
  content:"";
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:28px 28px;
  mask-image:radial-gradient(circle at center, #000 35%, transparent 80%);
  animation:phGridDrift 18s linear infinite;
  pointer-events:none;
}
.ph-ring{
  position:absolute;border-radius:50%;border:1px solid rgba(249,206,3,.28);
  animation:slowRotate 28s linear infinite;pointer-events:none;
}
.ph-ring.r1{width:220px;height:220px;right:-40px;top:-30px}
.ph-ring.r2{width:140px;height:140px;right:20px;top:20px;border-color:rgba(101,180,1,.35);animation-direction:reverse;animation-duration:18s}
.ph-beam{
  position:absolute;width:2px;height:120%;left:18%;top:-10%;
  background:linear-gradient(180deg, transparent, rgba(249,206,3,.55), transparent);
  animation:phBeam 3.5s ease-in-out infinite;pointer-events:none;
}
.ph-beam.b2{left:72%;animation-delay:-1.2s;background:linear-gradient(180deg, transparent, rgba(101,180,1,.5), transparent)}

.ph-kicker{position:relative;z-index:2;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:#F9CE03;margin-bottom:.75rem}
.ph-lines{position:relative;z-index:2;display:grid;gap:.55rem}
.ph-line{
  font-family:var(--font-display, "Bebas Neue", sans-serif);
  font-size:clamp(1.35rem, 2.6vw, 2rem);
  letter-spacing:.04em;line-height:1.1;color:#fff;
  opacity:0;transform:translateX(18px);
  animation:phLineIn .7s cubic-bezier(.22,1,.36,1) forwards;
}
.ph-line:nth-child(1){animation-delay:.15s}
.ph-line:nth-child(2){animation-delay:.28s;color:#F9CE03}
.ph-line:nth-child(3){animation-delay:.42s;color:rgba(255,255,255,.72);font-size:clamp(1rem,1.8vw,1.25rem)}
.ph-line:nth-child(4){animation-delay:.55s;color:#65B401;font-size:clamp(1rem,1.8vw,1.2rem)}

.ph-tags{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.15rem}
.ph-tags span{
  font-size:.72rem;padding:.35rem .65rem;border-radius:999px;
  border:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.8);
  background:rgba(0,0,0,.25);animation:phPulseSoft 3s ease-in-out infinite;
}
.ph-tags span:nth-child(2){animation-delay:.4s;border-color:rgba(249,206,3,.35);color:#F9CE03}
.ph-tags span:nth-child(3){animation-delay:.8s;border-color:rgba(101,180,1,.35);color:#65B401}

.ph-panel{display:grid;gap:.75rem}
.ph-chip{
  display:flex;align-items:center;gap:.85rem;padding:1rem 1.1rem;border-radius:14px;
  border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03);
  text-decoration:none;color:inherit;
  transition:transform .35s,border-color .35s,background .35s,box-shadow .35s;
  animation:phChipIn .6s ease forwards;opacity:0;transform:translateY(14px);
}
.ph-chip:nth-child(1){animation-delay:.1s}.ph-chip:nth-child(2){animation-delay:.2s}
.ph-chip:nth-child(3){animation-delay:.3s}.ph-chip:nth-child(4){animation-delay:.4s}
.ph-chip:hover{transform:translateY(-3px);border-color:rgba(249,206,3,.45);background:rgba(249,206,3,.06);box-shadow:0 10px 30px rgba(0,0,0,.35);color:inherit}
.ph-chip i{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:rgba(101,180,1,.15);color:#65B401;font-size:1.1rem;flex-shrink:0;animation:phIconPulse 2.8s ease-in-out infinite}
.ph-chip strong{display:block;color:#fff;font-size:.95rem}
.ph-chip span{font-size:.78rem;color:var(--muted-text,#aaa)}

.ph-stack{display:grid;gap:.65rem}
.ph-card{
  position:relative;overflow:hidden;padding:1rem 1.1rem;border-radius:14px;
  border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03);
  animation:phChipIn .65s ease forwards;opacity:0;transform:translateY(16px);
}
.ph-card:nth-child(1){animation-delay:.12s}.ph-card:nth-child(2){animation-delay:.24s}.ph-card:nth-child(3){animation-delay:.36s}
.ph-card::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(#F9CE03,#65B401);animation:phBar 2.4s ease-in-out infinite;
}
.ph-card .n{color:#F9CE03;font-family:var(--font-display,"Bebas Neue",sans-serif);letter-spacing:.08em;font-size:1.1rem}
.ph-card h3{margin:.2rem 0 .25rem;font-size:1rem;color:#fff}
.ph-card p{margin:0;font-size:.8rem;color:var(--muted-text,#aaa);line-height:1.5}

/* Pricing — meter bars */
.ph-meters{display:grid;gap:1rem;padding:1.25rem;border-radius:18px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03)}
.ph-meter label{display:flex;justify-content:space-between;font-size:.8rem;margin-bottom:.35rem;color:rgba(255,255,255,.85)}
.ph-meter label strong{color:#F9CE03}
.ph-meter .track{height:8px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
.ph-meter .fill{height:100%;border-radius:999px;background:linear-gradient(90deg,#F9CE03,#65B401);width:0;animation:phFill 1.2s ease forwards}
.ph-meter:nth-child(1) .fill{animation-delay:.15s;--w:35%}
.ph-meter:nth-child(2) .fill{animation-delay:.3s;--w:65%}
.ph-meter:nth-child(3) .fill{animation-delay:.45s;--w:95%}
@keyframes phFill{to{width:var(--w)}}

/* Portfolio — marquee ticker board */
.ph-ticker{
  position:relative;min-height:300px;border-radius:18px;overflow:hidden;
  border:1px dashed rgba(249,206,3,.35);background:rgba(0,0,0,.35);
  display:flex;flex-direction:column;justify-content:center;gap:.85rem;padding:1.25rem 0;
}
.ph-ticker-row{display:flex;gap:1.25rem;white-space:nowrap;animation:phTicker 18s linear infinite;font-family:var(--font-display,"Bebas Neue",sans-serif);font-size:clamp(1.4rem,3vw,2rem);letter-spacing:.06em;color:rgba(255,255,255,.35)}
.ph-ticker-row b{color:#F9CE03;font-weight:400}
.ph-ticker-row.alt{animation-direction:reverse;animation-duration:22s;color:rgba(101,180,1,.55)}
.ph-ticker-row.alt b{color:#65B401}
@keyframes phTicker{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* About — quote board variant accent */
.ph-quote{
  min-height:300px;border-radius:22px 8px 22px 8px;border:1px solid rgba(101,180,1,.35);
  background:linear-gradient(145deg,rgba(101,180,1,.08),rgba(249,206,3,.05));
  padding:1.5rem;display:flex;flex-direction:column;justify-content:center;gap:1rem;position:relative;overflow:hidden;
}
.ph-quote::after{content:"";position:absolute;right:-20px;bottom:-20px;width:120px;height:120px;border-radius:50%;border:20px solid rgba(249,206,3,.08);animation:slowRotate 20s linear infinite}
.ph-quote blockquote{margin:0;font-family:var(--font-display,"Bebas Neue",sans-serif);font-size:clamp(1.6rem,3vw,2.3rem);line-height:1.1;letter-spacing:.03em;color:#fff;position:relative;z-index:1}
.ph-quote blockquote span{color:#F9CE03}
.ph-quote .sig{position:relative;z-index:1;font-size:.8rem;color:var(--muted-text,#aaa);letter-spacing:.08em;text-transform:uppercase}

.page-related{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1.25rem}
.page-related a{
  display:flex;flex-direction:column;gap:.45rem;padding:1.15rem;border-radius:14px;
  border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.02);
  text-decoration:none;color:inherit;transition:transform .3s,border-color .3s,box-shadow .3s;
}
.page-related a:hover{transform:translateY(-4px);border-color:rgba(249,206,3,.4);box-shadow:0 12px 28px rgba(0,0,0,.28);color:inherit}
.page-related i{color:#F9CE03;font-size:1.25rem}
.page-related strong{color:#fff;font-size:.95rem}
.page-related span{font-size:.8rem;color:var(--muted-text,#aaa);line-height:1.45}

.anim-in{opacity:0;transform:translateY(28px)}
.anim-in.is-in{opacity:1;transform:none;transition:opacity .7s ease,transform .7s cubic-bezier(.22,1,.36,1)}
.anim-in.d1{transition-delay:.08s}.anim-in.d2{transition-delay:.16s}.anim-in.d3{transition-delay:.24s}

@keyframes phLineIn{to{opacity:1;transform:none}}
@keyframes phChipIn{to{opacity:1;transform:none}}
@keyframes phGridDrift{to{background-position:28px 28px}}
@keyframes phBeam{0%,100%{opacity:.25;transform:translateY(-8%)}50%{opacity:.9;transform:translateY(8%)}}
@keyframes phPulseSoft{0%,100%{opacity:.75}50%{opacity:1}}
@keyframes phIconPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes phBar{0%,100%{opacity:.55}50%{opacity:1}}

@media (max-width:992px){
  .ph-grid{grid-template-columns:1fr}
  .ph-stage{min-height:240px}
  .page-related{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .ph-orb,.ph-ring,.ph-beam,.ph-line,.ph-chip,.ph-card,.ph-tags span,.ph-stage::before{animation:none!important}
  .ph-line,.ph-chip,.ph-card,.anim-in{opacity:1;transform:none}
}
