/* ===== WOW LAYER 3 ===== */

/* animated grain + mesh over hero */
.pg-hero__mesh{position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.28; mix-blend-mode:screen; background:
  radial-gradient(38% 42% at 14% 22%, oklch(0.62 0.22 300 / .5), transparent 62%),
  radial-gradient(34% 38% at 86% 18%, oklch(0.60 0.18 245 / .48), transparent 62%),
  radial-gradient(40% 44% at 52% 88%, oklch(0.64 0.16 330 / .34), transparent 64%);
  animation:meshDrift 26s ease-in-out infinite alternate}
@keyframes meshDrift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-3%,2%,0) scale(1.1)}}
.pg-hero__grain{position:absolute; inset:0; z-index:2; pointer-events:none; opacity:.14; mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); animation:grainShift 1.1s steps(3) infinite}
@keyframes grainShift{0%{transform:translate(0,0)}33%{transform:translate(-3px,2px)}66%{transform:translate(2px,-3px)}100%{transform:translate(0,0)}}

/* scroll cue */
.scrollcue{position:absolute; left:50%; bottom:22px; z-index:3; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:8px; font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:oklch(1 0 0 / .6)}
.scrollcue span{width:1px; height:34px; background:linear-gradient(180deg,oklch(1 0 0 / .55),transparent); position:relative; overflow:hidden}
.scrollcue span::after{content:""; position:absolute; inset:0; background:#fff; animation:cueRun 2s ease-in-out infinite}
@keyframes cueRun{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}
@media(max-width:720px){ .scrollcue{display:none} }

/* live board panel */
.board{position:relative; overflow:hidden; background:var(--card); border:1px solid var(--line); border-radius:24px; box-shadow:var(--shadow-lg)}
.board__top{display:flex; align-items:center; gap:12px; padding:16px 20px; border-bottom:1px solid var(--line-soft); background:var(--paper-2)}
.board__top .t{font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-mute)}
.board__live{margin-left:auto; display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--green)}
.board__live i{width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 9px var(--green); animation:blink 1.5s infinite}
.board__vp{height:296px; overflow:hidden; position:relative; -webkit-mask-image:linear-gradient(180deg,transparent,#000 9%,#000 88%,transparent); mask-image:linear-gradient(180deg,transparent,#000 9%,#000 88%,transparent)}
.board__track{display:flex; flex-direction:column; animation:boardScroll 26s linear infinite}
.board:hover .board__track{animation-play-state:paused}
@keyframes boardScroll{from{transform:translateY(0)}to{transform:translateY(-50%)}}
.brw{display:grid; grid-template-columns:1fr auto auto; gap:14px; align-items:center; padding:15px 20px; border-bottom:1px dashed var(--line-soft)}
.brw__l b{display:block; font-size:14.5px; font-weight:700; letter-spacing:-.01em}
.brw__l span{font-family:var(--mono); font-size:11px; color:var(--ink-mute)}
.brw__m{font-family:var(--mono); font-size:11.5px; font-weight:600; white-space:nowrap; padding:5px 11px; border-radius:99px; background:var(--violet-tint); color:var(--violet)}
.brw__r{font-weight:800; font-size:15.5px; letter-spacing:-.02em; white-space:nowrap}
.brw--hot .brw__m{background:oklch(0.80 0.15 72 / .18); color:var(--amber-deep)}

/* logo cards marquee */
.logocards{overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); margin-top:26px}
.logocards__track{display:flex; gap:14px; width:max-content; animation:marq 42s linear infinite}
.logocards:hover .logocards__track{animation-play-state:paused}
.lgc{display:flex; align-items:center; gap:12px; padding:15px 22px; border:1px solid var(--line); border-radius:16px; background:var(--card); box-shadow:0 2px 10px oklch(0.40 0.10 285 / .05); transition:transform .3s, box-shadow .3s, border-color .3s}
.lgc:hover{transform:translateY(-4px); border-color:var(--violet); box-shadow:var(--shadow-md)}
.lgc__m{width:34px; height:34px; border-radius:10px; flex:none; display:grid; place-items:center; color:#fff; font-weight:800; font-size:13px; letter-spacing:-.03em}
.lgc__n{display:flex; flex-direction:column; gap:3px; white-space:nowrap}
.lgc__n b{font-size:14px; font-weight:700; letter-spacing:-.01em}
.lgc__n span{font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-mute)}
.lgc__v{display:inline-grid; place-items:center; width:15px; height:15px; border-radius:50%; background:var(--blue); color:#fff; flex:none}
.lgc__v svg{width:9px; height:9px}

/* step scroll-highlight */
.fl.is-hot, .cyc.is-hot .cyc__n{position:relative}
.fl.is-hot{border-color:rgba(255,255,255,.34); box-shadow:0 30px 60px rgba(8,4,34,.45); transform:translateY(-6px)}
.cyc.is-hot .cyc__n{transform:translateY(-6px) scale(1.06); box-shadow:0 18px 38px oklch(0.56 0.22 288 / .3); background:var(--grad); color:#fff}

/* card lift + border glow */
.fcard{will-change:transform}
.fcard:hover{box-shadow:0 28px 60px oklch(0.40 0.10 285 / .16), 0 0 0 1px var(--violet)}

/* final CTA orbiting glow */
.final__box{position:relative}
.final__orb{position:absolute; z-index:0; width:420px; height:420px; border-radius:50%; filter:blur(70px); pointer-events:none; mix-blend-mode:screen; opacity:.5}
.final__orb--1{top:-160px; left:-90px; background:radial-gradient(circle,oklch(0.86 0.14 320),transparent 66%); animation:orbA 17s ease-in-out infinite}
.final__orb--2{bottom:-180px; right:-90px; background:radial-gradient(circle,oklch(0.86 0.13 72),transparent 66%); animation:orbB 21s ease-in-out infinite}
@keyframes orbA{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(60px,50px) scale(1.16)}}
@keyframes orbB{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-56px,-44px) scale(1.12)}}

/* testimonial quote mark */
.tcard{position:relative; overflow:hidden}
.tcard::before{content:"\201C"; position:absolute; top:-22px; right:16px; font-family:var(--serif); font-size:120px; line-height:1; color:var(--violet); opacity:.07; pointer-events:none}

@media(print),(prefers-reduced-motion:reduce){
  .pg-hero__mesh,.pg-hero__grain,.scrollcue span::after,.board__track,.logocards__track,.final__orb{animation:none}
  .board__vp{height:auto; mask-image:none; -webkit-mask-image:none}
}