/* ============================================================
   About View Bespoke Micro-Animations & Core Variables
   ============================================================ */
:root {
  --moa-about-glow: rgba(var(--plx-brand-primary-raw, 75, 46, 255), 0.15);
}

/* Floating Grid Visual Trackers */
.plx-about-hero {
  position: relative;
  padding: var(--plx-space-8, 120px) 0 var(--plx-space-7, 80px) 0;
  overflow: hidden;
  background: radial-gradient(circle at top right, rgba(var(--plx-brand-primary-raw), 0.05), transparent 40%);
}

/* Tech Graphic Feature Container */
.plx-graphic-wrapper {
  position: relative;
  width: 100%;
  max-width: 440px;
  height: 440px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Custom Dual Orbit Ring System for the Graphic Wrapper */
.plx-about-orbit-outer {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 1px dashed rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  animation: plx-orbit-rotation 40s linear infinite;
}

.plx-about-orbit-inner {
  position: absolute;
  width: 70%;
  height: 70%;
  border: 1px dashed rgba(255, 255, 255, 0.65);
  border-radius: 50%;
  animation: plx-orbit-rotation 20s linear reverse infinite;
}

/* Interactive Card Morphing on Hover */
.plx-about-card {
  background: var(--plx-glass-bg, rgba(255, 255, 255, 0.02));
  border: 1px solid var(--plx-glass-border, rgba(255, 255, 255, 0.08));
  border-radius: 16px;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.plx-about-card:hover {
  transform: translateY(-6px);
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(var(--plx-brand-primary-raw), 0.3);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), 0 0 30px var(--moa-about-glow);
}

.plx-about-card:hover .plx-svg-icon {
  transform: scale(1.1);
  filter: drop-shadow(0 0 10px var(--plx-brand-primary));
}

.plx-svg-icon {
  transition: transform 0.3s ease, filter 0.3s ease;
}

/* Stats Counter Micro Layout */
.plx-stat-block {
  text-align: center;
  padding: var(--plx-space-4, 24px);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}
.plx-stat-block:last-child {
  border-right: none;
}

@media (max-width: 768px) {
  .plx-stat-block {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  .plx-stat-block:last-child {
    border-bottom: none;
  }
}

/* ============================================================
   Trust, Scale, & Executive Statement Enhancements
   ============================================================ */

/* Founder Portrait Framework */
.plx-founder-frame {
  position: relative;
  width: 100%;
  max-width: 300px;
  aspect-ratio: 4 / 5;
  margin: 0 auto;
}

.plx-founder-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
  filter: grayscale(20%) contrast(105%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 30px 60px rgba(0,0,0,0.4);
}

.plx-founder-frame::before {
  content: "";
  position: absolute;
  inset: -12px;
  border: 1px solid rgba(var(--plx-brand-primary-raw), 0.2);
  border-radius: 24px;
  z-index: -1;
  pointer-events: none;
  transition: transform 0.4s ease;
}

.plx-founder-frame:hover .plx-founder-image {
  transform: scale(1.02);
  border-color: var(--plx-brand-primary);
  filter: grayscale(0%) contrast(100%);
}

.plx-founder-frame:hover::before {
  transform: scale(1.05);
  border-color: rgba(var(--plx-brand-secondary-raw), 0.4);
}

/* Signature script style font tracking fallback */
.plx-signature {
  font-family: 'Georgia', serif;
  font-style: italic;
  font-size: 1.35rem;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 0.05em;
}

/* Infrastructure Node Map Accents */
.plx-trust-metric-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--plx-space-4);
  margin-top: var(--plx-space-6);
}

@media (max-width: 992px) {
  .plx-trust-metric-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 576px) {
  .plx-trust-metric-grid {
    grid-template-columns: 1fr;
  }
}

.plx-telemetry-card {
  background: linear-gradient(135deg, rgba(255,255,255,0.01) 0%, rgba(255,255,255,0.03) 100%);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 12px;
  padding: var(--plx-space-4);
  position: relative;
  overflow: hidden;
}

.plx-telemetry-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--plx-brand-primary);
  opacity: 0.4;
}

.plx-telemetry-card.secondary::before {
  background: var(--plx-brand-secondary);
}

.plx-pulse-dot {
  width: 6px;
  height: 6px;
  background-color: #22c55e;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 8px #22c55e;
  animation: plx-dot-pulse 2s infinite;
}

@keyframes plx-dot-pulse {
  0% { transform: scale(0.9); opacity: 0.6; }
  50% { transform: scale(1.3); opacity: 1; box-shadow: 0 0 12px #22c55e; }
  100% { transform: scale(0.9); opacity: 0.6; }
}


/* ============================================================
   Automation Loop
   ============================================================ */
.moa-system-flow{
    position:relative;
    overflow:hidden;
}

.moa-subtitle{
    color:#4f8cff;
    letter-spacing:.18em;
    font-size:.8rem;
    font-weight:700;
    text-transform:uppercase;
}

.moa-loop-wrapper{

    overflow:hidden;
    position:relative;

    mask-image:
    linear-gradient(
        to right,
        transparent,
        #000 10%,
        #000 90%,
        transparent
    );

    -webkit-mask-image:
    linear-gradient(
        to right,
        transparent,
        #000 10%,
        #000 90%,
        transparent
    );
}

.moa-loop-track{

    display:flex;
    align-items:center;
    gap:25px;

    width:max-content;

    animation:
    moaFlow 40s linear infinite;

    padding:40px 0;
}

.moa-loop-wrapper:hover .moa-loop-track{
    animation-play-state:paused;
}

.moa-pill{

    min-width:220px;

    padding:22px 28px;

    border-radius:20px;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;

    font-weight:600;

    backdrop-filter:blur(16px);

    border:1px solid rgba(255,255,255,.08);

    transition:.4s;

    position:relative;

    overflow:hidden;
}

.moa-pill::before{

    content:"";

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        135deg,
        rgba(255,255,255,.08),
        transparent
    );

    opacity:0;

    transition:.4s;
}

.moa-pill:hover{
    transform:translateY(-8px);
}

.moa-pill:hover::before{
    opacity:1;
}

.source{
    background:rgba(59,130,246,.08);
}

.module{
    background:rgba(16,185,129,.08);
}

.ai{
    background:rgba(168,85,247,.08);
}

.deterministic{
    background:rgba(79,140,255,.12);
    border-color:rgba(79,140,255,.35);
    box-shadow:0 0 30px rgba(79,140,255,.25);
}

.agents{
    background:rgba(236,72,153,.08);
}

.automation{
    background:rgba(249,115,22,.08);
}

.audit{
    background:rgba(34,197,94,.08);
}

.moa-pill i{
    font-size:1.1rem;
}

.moa-arrow{
    color:#4f8cff;
    opacity:.5;
    font-size:1.2rem;
}

@keyframes moaFlow{

    from{
        transform:translateX(0);
    }

    to{
        transform:translateX(-50%);
    }
}

@media(max-width:768px){

    .moa-pill{
        min-width:180px;
        padding:18px;
        font-size:.9rem;
    }

    .moa-loop-track{
        gap:15px;
    }
}