/* ============================================================
   XP ONE — Effects layer (Spellar / RevenueCat / ClickUp / Arcade-inspired)
   Pure CSS + SVG. Zero external deps. 100/100 PageSpeed preserved.
   ============================================================ */

/* ============================================================
   1. HERO FLOATING MOCKUP — mini dashboard with live metrics
   ============================================================ */
.hero-layout{display:grid;grid-template-columns:1fr;gap:48px;align-items:center}
@media(min-width:1080px){.hero-layout{grid-template-columns:1.05fr 1fr;gap:64px}}

.hero-mockup{
  position:relative;
  perspective:1400px;
  will-change:transform;
}
.hero-mockup-inner{
  background:#0F0F0F;
  border:1.5px solid rgba(212,168,74,0.25);
  box-shadow:
    0 30px 80px rgba(0,0,0,0.35),
    0 0 0 1px rgba(255,255,255,0.04) inset,
    0 30px 60px -30px rgba(212,168,74,0.20);
  padding:20px;
  display:flex;flex-direction:column;gap:14px;
  transition:transform 0.4s var(--easeOut);
  animation:heroFloat 6s ease-in-out infinite;
}
@keyframes heroFloat{
  0%,100%{transform:translateY(0) rotateX(0) rotateY(0)}
  50%{transform:translateY(-8px) rotateX(0.5deg) rotateY(-0.3deg)}
}
@media (prefers-reduced-motion: reduce){
  .hero-mockup-inner{animation:none}
}

.hm-bar{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,0.08);padding-bottom:12px}
.hm-bar-title{font-family:ui-monospace,monospace;font-size:11px;color:rgba(255,255,255,0.55);letter-spacing:0.06em;text-transform:uppercase}
.hm-bar-dots{display:flex;gap:6px}
.hm-bar-dots span{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,0.12)}
.hm-bar-dots span:nth-child(1){background:#FF5F57}
.hm-bar-dots span:nth-child(2){background:#FEBC2E}
.hm-bar-dots span:nth-child(3){background:#28C840}

.hm-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.hm-metric{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);padding:14px}
.hm-metric-label{font-family:ui-monospace,monospace;font-size:9.5px;color:rgba(255,255,255,0.5);letter-spacing:0.08em;text-transform:uppercase;margin-bottom:6px;display:flex;align-items:center;gap:4px}
.hm-metric-label .hm-live{width:5px;height:5px;border-radius:50%;background:#4ADE80;animation:hmPulse 1.6s infinite}
@keyframes hmPulse{0%,100%{opacity:0.4}50%{opacity:1}}
.hm-metric-v{font-size:22px;font-weight:900;letter-spacing:-0.04em;color:#fff;font-variant-numeric:tabular-nums;line-height:1}
.hm-metric-delta{font-family:ui-monospace,monospace;font-size:10.5px;color:#9CA985;letter-spacing:0.02em;margin-top:4px}
.hm-metric-delta.up::before{content:'↑ '}

.hm-spark{margin-top:6px;height:24px}
.hm-spark svg{width:100%;height:100%;overflow:visible}
.hm-spark .sline{fill:none;stroke:url(#sparkGold);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:200;stroke-dashoffset:200;animation:hmDraw 2.2s ease-out forwards 0.4s}
.hm-spark .sline-2{animation-delay:0.7s}
.hm-spark .sline-3{animation-delay:1s}
@keyframes hmDraw{to{stroke-dashoffset:0}}
.hm-spark .sfill{fill:url(#sparkFill);opacity:0;animation:hmFill 1s ease-out forwards 2.4s}
@keyframes hmFill{to{opacity:0.6}}

.hm-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 10px;background:rgba(255,255,255,0.02);border-left:2px solid var(--gold-bright)}
.hm-row-avatar{width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,var(--grad-1),var(--grad-2));color:#fff;font-weight:800;font-size:11px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.hm-row-info{flex:1;min-width:0}
.hm-row-name{font-size:12.5px;font-weight:600;color:#fff;letter-spacing:-0.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hm-row-meta{font-family:ui-monospace,monospace;font-size:10px;color:rgba(255,255,255,0.4);letter-spacing:0.03em}
.hm-row-status{font-family:ui-monospace,monospace;font-size:10px;color:var(--gold-bright);letter-spacing:0.04em;text-transform:uppercase;font-weight:700;flex-shrink:0}

.hm-stream{display:flex;flex-direction:column;gap:6px}
.hm-stream .hm-row{animation:hmRowIn 0.6s var(--easeOut) both}
.hm-stream .hm-row:nth-child(1){animation-delay:0.2s}
.hm-stream .hm-row:nth-child(2){animation-delay:0.45s}
.hm-stream .hm-row:nth-child(3){animation-delay:0.7s}
@keyframes hmRowIn{from{opacity:0;transform:translateX(-8px)} to{opacity:1;transform:none}}

/* Background gold glow behind hero mockup */
.hero-mockup::before{
  content:'';position:absolute;inset:-30%;
  background:radial-gradient(ellipse at center, rgba(212,168,74,0.18), transparent 60%);
  filter:blur(40px);pointer-events:none;z-index:-1;
}

/* ============================================================
   2. PRODUCT TABS — "See XP One in action"
   ============================================================ */
.product-showcase{padding:140px 0;background:var(--bg);border-top:1.5px solid var(--ink)}

.pt-tabs{
  display:flex;flex-wrap:wrap;gap:0;
  border:1.5px solid var(--ink);
  margin-top:48px;background:var(--paper);
}
.pt-tab{
  flex:1;min-width:140px;
  padding:18px 16px;
  background:transparent;color:var(--ink-3);
  border-right:1px solid var(--line);
  font-family:ui-monospace,monospace;font-size:11px;letter-spacing:0.06em;text-transform:uppercase;
  font-weight:700;cursor:pointer;transition:all 0.2s var(--easeOut);
  display:flex;flex-direction:column;align-items:center;gap:4px;
  position:relative;
}
.pt-tab:last-child{border-right:none}
.pt-tab:hover{background:var(--bg-2);color:var(--ink)}
.pt-tab.active{background:var(--ink);color:#fff}
.pt-tab .pt-tab-status{
  font-size:9px;letter-spacing:0.04em;opacity:0.7;
}
.pt-tab.active .pt-tab-status{color:var(--gold-bright)}
.pt-tab .pt-tab-status.coming{color:var(--grad-2)}
.pt-tab.active .pt-tab-status.coming{color:var(--gold-bright)}

.pt-panel{
  border:1.5px solid var(--ink);border-top:none;
  background:var(--bg-dark);color:#fff;
  padding:48px 40px;min-height:420px;
  position:relative;overflow:hidden;
  display:none;
}
.pt-panel.active{display:block;animation:ptFade 0.5s var(--easeOut) both}
@keyframes ptFade{from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none}}

.pt-panel-grid{display:grid;grid-template-columns:1fr;gap:40px;align-items:center}
@media(min-width:880px){.pt-panel-grid{grid-template-columns:1fr 1.2fr;gap:60px}}
.pt-panel-copy h3{font-size:32px;font-weight:900;letter-spacing:-0.035em;line-height:1.05;margin-bottom:14px}
.pt-panel-copy h3 .grad{background:linear-gradient(95deg,var(--gold-bright),var(--grad-1));-webkit-background-clip:text;background-clip:text;color:transparent}
.pt-panel-copy p{font-size:15.5px;color:rgba(255,255,255,0.72);line-height:1.6;margin-bottom:14px}
.pt-panel-copy ul{list-style:none;padding:0;margin-top:18px}
.pt-panel-copy li{font-size:13.5px;color:rgba(255,255,255,0.78);padding:6px 0;display:flex;gap:10px}
.pt-panel-copy li::before{content:'+';color:var(--gold-bright);font-family:ui-monospace,monospace;font-weight:900}

.pt-mock{
  background:#0F0F0F;
  border:1.5px solid rgba(212,168,74,0.20);
  padding:20px;
  box-shadow:0 20px 60px rgba(0,0,0,0.40);
  position:relative;overflow:hidden;
}

/* ============================================================
   MOCKUP 1 — SOURCING (Hunter) — animated LinkedIn search
   ============================================================ */
.mock-search{display:flex;flex-direction:column;gap:14px}
.ms-bar{display:flex;align-items:center;gap:10px;padding:10px 14px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08)}
.ms-icon{width:14px;height:14px;border:1.5px solid rgba(255,255,255,0.4);border-radius:50%;flex-shrink:0}
.ms-query{font-family:ui-monospace,monospace;font-size:12.5px;color:rgba(255,255,255,0.9);flex:1;letter-spacing:-0.01em;overflow:hidden;white-space:nowrap}
.ms-query::after{content:'|';color:var(--gold-bright);animation:msBlink 1s infinite}
@keyframes msBlink{0%,49%{opacity:1}50%,100%{opacity:0}}
.ms-filters{display:flex;flex-wrap:wrap;gap:6px}
.ms-chip{font-family:ui-monospace,monospace;font-size:10.5px;color:rgba(255,255,255,0.7);padding:4px 10px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.10);letter-spacing:0.02em}
.ms-chip.gold{background:rgba(212,168,74,0.12);color:var(--gold-bright);border-color:rgba(212,168,74,0.3)}
.ms-results{display:flex;flex-direction:column;gap:6px}
.ms-count{font-family:ui-monospace,monospace;font-size:11px;color:var(--positive);letter-spacing:0.06em;text-transform:uppercase;margin-bottom:6px;display:flex;align-items:center;gap:8px}
.ms-count strong{color:var(--gold-bright);font-size:14px;font-variant-numeric:tabular-nums}
.ms-count::before{content:'';width:6px;height:6px;border-radius:50%;background:#4ADE80;animation:hmPulse 1.4s infinite}
.ms-lead{display:flex;align-items:center;gap:10px;padding:9px 12px;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.06)}
.ms-lead-avatar{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,var(--grad-1),var(--grad-2));color:#fff;font-weight:800;font-size:11px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ms-lead-info{flex:1;min-width:0}
.ms-lead-name{font-size:13px;font-weight:600;color:#fff;letter-spacing:-0.01em}
.ms-lead-title{font-family:ui-monospace,monospace;font-size:10.5px;color:rgba(255,255,255,0.45);letter-spacing:0.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ms-lead-tag{font-family:ui-monospace,monospace;font-size:9.5px;color:var(--gold-bright);padding:3px 8px;background:rgba(212,168,74,0.12);border:1px solid rgba(212,168,74,0.25);letter-spacing:0.05em;text-transform:uppercase;font-weight:700;flex-shrink:0}
.pt-panel.active .ms-lead{animation:msLeadIn 0.55s var(--easeOut) both}
.pt-panel.active .ms-lead:nth-child(2){animation-delay:0.4s}
.pt-panel.active .ms-lead:nth-child(3){animation-delay:0.7s}
.pt-panel.active .ms-lead:nth-child(4){animation-delay:1s}
@keyframes msLeadIn{from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none}}

/* ============================================================
   MOCKUP 2 — ENRICHMENT (Profiler)
   ============================================================ */
.mock-enrich{display:flex;flex-direction:column;gap:12px}
.me-card{padding:16px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);display:flex;align-items:center;gap:12px}
.me-avatar{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--grad-1),var(--grad-2));color:#fff;font-weight:800;font-size:16px;display:flex;align-items:center;justify-content:center}
.me-card-info h4{font-size:15px;font-weight:700;color:#fff;letter-spacing:-0.015em}
.me-card-info p{font-family:ui-monospace,monospace;font-size:11px;color:rgba(255,255,255,0.5);letter-spacing:0.02em;margin-top:2px}
.me-rows{display:flex;flex-direction:column;gap:6px}
.me-row{display:flex;align-items:center;gap:12px;padding:9px 12px;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.06);font-family:ui-monospace,monospace;font-size:11.5px}
.me-row-label{color:rgba(255,255,255,0.4);width:64px;flex-shrink:0;letter-spacing:0.04em;text-transform:uppercase;font-size:9.5px;font-weight:700}
.me-row-val{flex:1;color:#fff;letter-spacing:-0.005em;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.me-row-check{color:var(--positive);font-size:13px;flex-shrink:0}
.me-row-tag{font-size:9.5px;color:var(--gold-bright);padding:2px 7px;background:rgba(212,168,74,0.12);letter-spacing:0.04em;text-transform:uppercase;font-weight:700;flex-shrink:0}
.pt-panel.active .me-row{animation:msLeadIn 0.55s var(--easeOut) both}
.pt-panel.active .me-row:nth-child(1){animation-delay:0.2s}
.pt-panel.active .me-row:nth-child(2){animation-delay:0.5s}
.pt-panel.active .me-row:nth-child(3){animation-delay:0.8s}
.pt-panel.active .me-row:nth-child(4){animation-delay:1.1s}

/* ============================================================
   MOCKUP 3 — SEQUENCE (Operator) — multichannel flow
   ============================================================ */
.mock-sequence{padding:8px}
.mseq-flow{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:18px;position:relative}
.mseq-channel{flex:1;text-align:center;padding:14px 8px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);position:relative;z-index:2}
.mseq-channel-name{font-family:ui-monospace,monospace;font-size:10.5px;color:rgba(255,255,255,0.7);letter-spacing:0.04em;text-transform:uppercase;font-weight:700;margin-bottom:4px}
.mseq-channel-count{font-size:18px;font-weight:900;color:var(--gold-bright);font-variant-numeric:tabular-nums;letter-spacing:-0.02em;line-height:1}
.mseq-channel-label{font-family:ui-monospace,monospace;font-size:9px;color:rgba(255,255,255,0.4);letter-spacing:0.05em;text-transform:uppercase;margin-top:4px}
.mseq-arrow{position:relative;flex:0 0 32px;height:2px;background:rgba(212,168,74,0.20);overflow:hidden}
.mseq-arrow::after{content:'';position:absolute;left:-20%;top:-2px;width:30%;height:6px;background:linear-gradient(90deg,transparent,var(--gold-bright),transparent);animation:mseqPacket 2s linear infinite}
@keyframes mseqPacket{to{left:120%}}

.mseq-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mseq-stat{padding:10px 12px;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.06)}
.mseq-stat-label{font-family:ui-monospace,monospace;font-size:9.5px;color:rgba(255,255,255,0.5);letter-spacing:0.06em;text-transform:uppercase;margin-bottom:4px}
.mseq-stat-v{font-size:18px;font-weight:900;letter-spacing:-0.025em;color:#fff;font-variant-numeric:tabular-nums;line-height:1}
.mseq-stat-v.gold{background:linear-gradient(95deg,var(--gold-bright),var(--grad-1));-webkit-background-clip:text;background-clip:text;color:transparent}
.mseq-timer{margin-top:16px;padding:10px 14px;background:rgba(212,168,74,0.08);border-left:2px solid var(--gold-bright);font-family:ui-monospace,monospace;font-size:11px;color:rgba(255,255,255,0.9);letter-spacing:0.02em;display:flex;justify-content:space-between;align-items:center}
.mseq-timer-l{color:rgba(255,255,255,0.55);text-transform:uppercase;font-size:9.5px;letter-spacing:0.06em;font-weight:700}
.mseq-timer-v{color:var(--gold-bright);font-weight:700;font-variant-numeric:tabular-nums}

/* ============================================================
   MOCKUP 4 — REPLY (Closer) — coming Q3 2026 — beta UI tease
   ============================================================ */
.mock-reply{display:flex;flex-direction:column;gap:8px}
.mr-msg{display:flex;align-items:center;gap:10px;padding:9px 12px;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.06)}
.mr-msg-avatar{width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,0.08);color:rgba(255,255,255,0.6);font-weight:700;font-size:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.mr-msg-info{flex:1;min-width:0}
.mr-msg-from{font-size:12px;font-weight:600;color:#fff;letter-spacing:-0.01em}
.mr-msg-preview{font-family:ui-monospace,monospace;font-size:10.5px;color:rgba(255,255,255,0.45);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:0.01em}
.mr-msg-tag{font-family:ui-monospace,monospace;font-size:9.5px;padding:3px 8px;letter-spacing:0.05em;text-transform:uppercase;font-weight:700;flex-shrink:0}
.mr-msg-tag.positive{color:var(--positive);background:rgba(122,138,94,0.15);border:1px solid var(--positive)}
.mr-msg-tag.objection{color:#E58A4A;background:rgba(229,138,74,0.10);border:1px solid rgba(229,138,74,0.4)}
.mr-msg-tag.ooo{color:rgba(255,255,255,0.5);background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.15)}
.mr-draft{margin-top:8px;padding:14px;background:rgba(212,168,74,0.06);border:1px dashed rgba(212,168,74,0.30);font-family:ui-monospace,monospace;font-size:11.5px;color:rgba(255,255,255,0.85);letter-spacing:-0.005em;line-height:1.5}
.mr-draft-label{display:flex;align-items:center;gap:6px;font-family:ui-monospace,monospace;font-size:9.5px;color:var(--gold-bright);letter-spacing:0.06em;text-transform:uppercase;font-weight:700;margin-bottom:8px}
.mr-draft-label::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--gold-bright);animation:hmPulse 1.4s infinite}
.mr-typing::after{content:'|';color:var(--gold-bright);animation:msBlink 1s infinite}

/* ============================================================
   MOCKUP 5 — CALENDAR (Scheduler) — coming Q3 2026
   ============================================================ */
.mock-calendar{display:flex;flex-direction:column;gap:12px}
.mc-week{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;padding:14px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08)}
.mc-day{text-align:center;font-family:ui-monospace,monospace;font-size:9.5px;color:rgba(255,255,255,0.4);letter-spacing:0.06em;text-transform:uppercase;padding:4px 2px;border-bottom:1px dotted rgba(255,255,255,0.10);font-weight:700}
.mc-slot{padding:6px 4px;font-family:ui-monospace,monospace;font-size:10px;background:rgba(255,255,255,0.02);color:rgba(255,255,255,0.5);text-align:center;letter-spacing:0.02em;border:1px solid transparent}
.mc-slot.taken{background:rgba(255,255,255,0.06);color:rgba(255,255,255,0.3);text-decoration:line-through}
.mc-slot.booked{background:linear-gradient(135deg,var(--gold-bright),var(--grad-1));color:#fff;font-weight:700;border-color:var(--gold-bright);animation:mcGlow 2s ease-in-out infinite}
@keyframes mcGlow{0%,100%{box-shadow:0 0 0 0 rgba(229,189,104,0.4)}50%{box-shadow:0 0 0 6px rgba(229,189,104,0)}}
.mc-confirm{padding:14px;background:rgba(122,138,94,0.10);border-left:2px solid var(--positive);font-size:13px;color:rgba(255,255,255,0.92)}
.mc-confirm strong{color:var(--positive);font-weight:700;display:block;font-size:11px;letter-spacing:0.06em;text-transform:uppercase;margin-bottom:4px}
.mc-confirm-time{font-family:ui-monospace,monospace;font-weight:700;color:#fff}

/* ============================================================
   COMING badge inside panel header
   ============================================================ */
.pt-coming-badge{
  display:inline-flex;align-items:center;gap:8px;
  font-family:ui-monospace,monospace;font-size:10px;
  padding:5px 10px;background:rgba(212,168,74,0.12);
  color:var(--gold-bright);border:1px solid rgba(212,168,74,0.30);
  letter-spacing:0.06em;text-transform:uppercase;font-weight:700;
  margin-bottom:14px;
}
.pt-coming-badge::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--gold-bright);animation:hmPulse 1.4s infinite}

/* ============================================================
   Mobile responsive
   ============================================================ */
@media(max-width:760px){
  .hero-mockup{margin-top:32px}
  .hm-metrics{grid-template-columns:1fr 1fr}
  .hm-metric:nth-child(3){display:none}
  .pt-tabs{flex-direction:column}
  .pt-tab{border-right:none;border-bottom:1px solid var(--line)}
  .pt-tab:last-child{border-bottom:none}
  .pt-panel{padding:32px 22px}
  .pt-panel-copy h3{font-size:24px}
  .mc-week{grid-template-columns:repeat(5,1fr);gap:2px}
  .mc-slot{font-size:9px;padding:4px 2px}
  .mseq-arrow{flex:0 0 16px}
}