/* LiveIt public client presentation P2 — page scoped, static UI only. */

.publicClientPresentation{
  --client-bg:#070a12;
  --client-panel:#0d1220;
  --client-panel-2:#111528;
  --client-line:rgba(137,151,190,.22);
  --client-copy:#e9eefb;
  --client-muted:#a9b3ca;
  --client-purple:#7c3cff;
  --client-pink:#ef3f8f;
  --client-blue:#3387ff;
  --client-cyan:#17c8d4;
  background:
    radial-gradient(1000px 520px at 75% -12%, rgba(82,71,255,.12), transparent 64%),
    linear-gradient(180deg,#070a12 0%,#080b13 100%);
}

.publicClientPresentation .publicTopNav{
  background:rgba(5,8,16,.92);
  border-bottom:1px solid rgba(255,255,255,.055);
  backdrop-filter:blur(18px);
}

.publicClientPresentation .publicNavLinks{
  gap:26px;
}

.publicClientPresentation .publicNavLinks a{
  color:#c7d1e5;
  font-weight:800;
  letter-spacing:.01em;
}

.publicClientPresentation .publicNavLinks a:hover{
  color:#fff;
}

.publicClientPresentation .publicSigninHero{
  border-bottom:1px solid rgba(255,255,255,.04);
}

/* Sign-in becomes focused: no commercial CTA row. */
.publicClientPresentation .signinCardPro{
  padding-top:30px;
}

.publicClientPresentation .signinSubPro{
  max-width:370px;
  margin-bottom:28px;
}

/* Premium section rhythm */
.publicClientPresentation .publicCapabilitiesSection,
.publicClientPresentation .publicWorkflowSection,
.publicClientPresentation .publicEnterpriseBand{
  width:min(1220px,calc(100% - 48px));
  margin-left:auto;
  margin-right:auto;
}

.publicClientPresentation .publicCapabilitiesSection{
  padding-top:92px;
  padding-bottom:66px;
}

.publicClientPresentation .publicSectionHeadPremium{
  max-width:900px;
  margin:0 auto 38px;
  text-align:center;
}

.publicClientPresentation .publicSectionHeadPremium .publicEyebrow{
  display:inline-flex;
  padding:7px 12px;
  border-radius:999px;
  border:1px solid rgba(148,115,255,.22);
  background:rgba(111,72,255,.08);
  color:#d7c9ff;
  font-size:11px;
  font-weight:900;
  letter-spacing:.13em;
  text-transform:uppercase;
}

.publicClientPresentation .publicSectionHeadPremium h2{
  margin:18px auto 12px;
  max-width:960px;
  font-size:clamp(34px,4.5vw,58px);
  line-height:1.02;
  letter-spacing:-.045em;
  color:#f5f7ff;
}

.publicClientPresentation .publicSectionHeadPremium p{
  max-width:840px;
  margin:0 auto;
  font-size:17px;
  line-height:1.6;
  color:#aeb8cf;
}

.publicClientPresentation .publicFeatureGridFive{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:18px;
}

.publicClientPresentation .publicFeatureCardPremium{
  grid-column:span 2;
  position:relative;
  min-height:250px;
  padding:26px;
  border-radius:22px;
  border:1px solid rgba(137,151,190,.18);
  background:
    radial-gradient(420px 210px at 100% 0%, rgba(117,69,255,.11), transparent 64%),
    linear-gradient(180deg,rgba(20,21,38,.96),rgba(10,14,25,.98));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    0 20px 48px rgba(0,0,0,.25);
  overflow:hidden;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}

.publicClientPresentation .publicFeatureCardPremium::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:2px;
  opacity:.55;
  background:linear-gradient(90deg,transparent,#715bff,#e14ba3,transparent);
}

.publicClientPresentation .publicFeatureCardPremium:hover{
  transform:translateY(-4px);
  border-color:rgba(139,116,255,.34);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    0 26px 58px rgba(0,0,0,.32),
    0 0 26px rgba(94,67,255,.08);
}

.publicClientPresentation .publicFeatureCardWide{
  grid-column:span 3;
}

.publicClientPresentation .publicFeatureTopline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:24px;
}

.publicClientPresentation .publicFeatureIcon{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(145deg,rgba(72,89,255,.20),rgba(200,55,180,.10));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 12px 28px rgba(0,0,0,.22);
}

.publicClientPresentation .publicFeatureIcon svg{
  width:25px;
  height:25px;
  fill:none;
  stroke:#dbe6ff;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.publicClientPresentation .publicFeatureIconLive svg{stroke:#76b7ff;}
.publicClientPresentation .publicFeatureIconEdit svg{stroke:#d6b7ff;}
.publicClientPresentation .publicFeatureIconReframe svg{stroke:#ff8bc1;}
.publicClientPresentation .publicFeatureIconStudio svg{stroke:#8ad7ff;}
.publicClientPresentation .publicFeatureIconGenerator svg{stroke:#c7a8ff;}

.publicClientPresentation .publicFeatureTag{
  padding:6px 9px;
  border-radius:999px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.07);
  color:#8f9ab5;
  font-size:10px;
  font-weight:900;
  letter-spacing:.12em;
}

.publicClientPresentation .publicFeatureCardPremium h3{
  margin:0 0 12px;
  color:#f7f9ff;
  font-size:24px;
  letter-spacing:-.025em;
}

.publicClientPresentation .publicFeatureCardPremium p{
  margin:0;
  color:#acb5ca;
  font-size:15.5px;
  line-height:1.62;
}

/* Workflow */
.publicClientPresentation .publicWorkflowSection{
  padding:64px 0 74px;
  border-top:1px solid rgba(255,255,255,.04);
  border-bottom:1px solid rgba(255,255,255,.04);
}

.publicClientPresentation .publicSectionHeadCompact{
  margin-bottom:30px;
}

.publicClientPresentation .publicWorkflowRail{
  display:grid;
  grid-template-columns:1fr auto 1fr auto 1fr auto 1fr auto 1fr auto 1fr;
  align-items:center;
  gap:10px;
  padding:18px;
  border-radius:22px;
  border:1px solid rgba(113,132,179,.20);
  background:linear-gradient(180deg,rgba(14,19,34,.88),rgba(8,12,22,.94));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 18px 44px rgba(0,0,0,.22);
}

.publicClientPresentation .publicWorkflowStep{
  min-height:84px;
  padding:16px 12px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:7px;
  text-align:center;
  border-radius:15px;
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.045);
}

.publicClientPresentation .publicWorkflowStep span{
  color:#7d8aa8;
  font-size:10px;
  font-weight:900;
  letter-spacing:.1em;
}

.publicClientPresentation .publicWorkflowStep strong{
  color:#eef3ff;
  font-size:14px;
}

.publicClientPresentation .publicWorkflowArrow{
  color:#745eff;
  font-size:20px;
  opacity:.72;
}

/* Enterprise block */
.publicClientPresentation .publicEnterpriseBand{
  margin-top:76px;
  margin-bottom:72px;
  padding:42px;
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:34px 40px;
  border-radius:26px;
  border:1px solid rgba(137,151,190,.20);
  background:
    radial-gradient(680px 300px at 100% 100%,rgba(190,56,126,.12),transparent 65%),
    radial-gradient(560px 280px at 0% 0%,rgba(86,69,255,.10),transparent 64%),
    linear-gradient(145deg,#0c1020,#0a0e18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 26px 60px rgba(0,0,0,.25);
}

.publicClientPresentation .publicEnterpriseCopy h2{
  margin:16px 0 14px;
  color:#f3f6ff;
  font-size:clamp(32px,4vw,52px);
  line-height:1.04;
  letter-spacing:-.04em;
}

.publicClientPresentation .publicEnterpriseCopy p{
  max-width:660px;
  margin:0;
  color:#aeb8cc;
  line-height:1.65;
}

.publicClientPresentation .publicEnterpriseGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.publicClientPresentation .publicEnterpriseItem{
  position:relative;
  padding:16px 16px 15px 34px;
  border-radius:15px;
  border:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.025);
}

.publicClientPresentation .publicEnterpriseDot{
  position:absolute;
  left:15px;
  top:21px;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#8a61ff;
  box-shadow:0 0 12px rgba(138,97,255,.70);
}

.publicClientPresentation .publicEnterpriseItem strong{
  display:block;
  color:#ecf2ff;
  font-size:13.5px;
}

.publicClientPresentation .publicEnterpriseItem small{
  display:block;
  margin-top:5px;
  color:#8f9bb4;
  line-height:1.4;
}

.publicClientPresentation .publicAudienceRow{
  grid-column:1/-1;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  padding-top:8px;
}

.publicClientPresentation .publicAudienceRow span{
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.03);
  color:#b6c1d6;
  font-size:12px;
  font-weight:800;
}

.publicClientPresentation .publicClientFooter{
  width:min(1220px,calc(100% - 48px));
  margin:0 auto;
  padding:24px 0 38px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  border-top:1px solid rgba(255,255,255,.055);
  color:#8894ad;
}

.publicClientPresentation .publicClientFooter div{
  display:flex;
  flex-direction:column;
  gap:5px;
}

.publicClientPresentation .publicClientFooter strong{
  color:#dfe7f8;
}

.publicClientPresentation .publicClientFooter a{
  color:#aeb9d2;
  text-decoration:none;
  font-weight:800;
}

@media(max-width:980px){
  .publicClientPresentation .publicFeatureGridFive{
    grid-template-columns:1fr 1fr;
  }
  .publicClientPresentation .publicFeatureCardPremium,
  .publicClientPresentation .publicFeatureCardWide{
    grid-column:span 1;
  }
  .publicClientPresentation .publicWorkflowRail{
    grid-template-columns:1fr 1fr 1fr;
  }
  .publicClientPresentation .publicWorkflowArrow{display:none;}
  .publicClientPresentation .publicEnterpriseBand{
    grid-template-columns:1fr;
  }
}

@media(max-width:640px){
  .publicClientPresentation .publicCapabilitiesSection,
  .publicClientPresentation .publicWorkflowSection,
  .publicClientPresentation .publicEnterpriseBand,
  .publicClientPresentation .publicClientFooter{
    width:min(100% - 28px,1220px);
  }
  .publicClientPresentation .publicFeatureGridFive{
    grid-template-columns:1fr;
  }
  .publicClientPresentation .publicWorkflowRail{
    grid-template-columns:1fr 1fr;
  }
  .publicClientPresentation .publicEnterpriseBand{
    padding:28px 22px;
  }
  .publicClientPresentation .publicEnterpriseGrid{
    grid-template-columns:1fr;
  }
  .publicClientPresentation .publicClientFooter{
    align-items:flex-start;
    flex-direction:column;
  }
}