/* PCI Hero — scoped under #pci-hero. Same brand tokens as the other PCI
   modules. Keyframes carry a pcih prefix so they can't collide with the theme.
   Insert the shortcode in a FULL-WIDTH section with no padding. */

#pci-hero{
  --pcih-bg:#faf9f5; --pcih-ink:#15293f; --pcih-muted:#8a93a0;
  --pcih-gold:#c2902a; --pcih-green:#2f7d55; --pcih-lightgold:#ead9a8;
  --pcih-sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --pcih-display:'Outfit',var(--pcih-sans);

  position:relative;min-height:110vh;width:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  overflow:hidden;background:var(--pcih-bg);
  font-family:var(--pcih-sans);color:var(--pcih-ink);
  -webkit-font-smoothing:antialiased;
}
@media (min-width:640px){#pci-hero{min-height:140vh}}
#pci-hero *{box-sizing:border-box;margin:0;padding:0}
#pci-hero ::selection{background:var(--pcih-lightgold);color:var(--pcih-ink)}

@keyframes pcihRise{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}
@keyframes pcihFade{to{opacity:1}}
@keyframes pcihFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes pcihDraw{to{stroke-dashoffset:0}}
@keyframes pcihBlob{0%,100%{opacity:.65;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.12)}}
@keyframes pcihNode{0%,100%{transform:scale(1)}50%{transform:scale(1.35)}}

/* ---- video layer, blended into the base color ---- */
#pci-hero .pcih-video{
  position:absolute;top:15vh;left:0;width:100%;height:95vh;z-index:0;pointer-events:none;
}
@media (min-width:640px){#pci-hero .pcih-video{top:20vh;height:120vh}}
#pci-hero .pcih-video video{width:100%;height:100%;object-fit:cover;display:block}
#pci-hero .pcih-video.video-failed video{display:none}
#pci-hero .pcih-video.video-failed::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(175deg,#dff0ee 0%, #9fd4cf 30%, #3d9db1 60%, #16607f 100%);
}
#pci-hero .pcih-mask-top{
  position:absolute;top:0;left:0;width:100%;height:56vh;
  background:linear-gradient(to bottom, var(--pcih-bg) 0%, var(--pcih-bg) 22%, rgba(250,249,245,.92) 45%, rgba(250,249,245,.55) 72%, rgba(250,249,245,0) 100%);
}
#pci-hero .pcih-mask-bottom{
  position:absolute;bottom:0;left:0;width:100%;height:14vh;
  background:linear-gradient(to top, var(--pcih-bg), rgba(250,249,245,0));
}

/* ---- content ---- */
#pci-hero .pcih-content{
  max-width:1280px;width:100%;margin:14vh auto 0;
  padding:0 32px;position:relative;z-index:10;
  display:grid;grid-template-columns:repeat(12,1fr);column-gap:16px;
}
@media (min-width:768px){#pci-hero .pcih-content{padding:0 64px;column-gap:32px;margin-top:15vh}}
#pci-hero .pcih-text{grid-column:1 / span 12}
@media (min-width:768px){#pci-hero .pcih-text{grid-column:2 / span 10}}

#pci-hero .pcih-eyebrow{
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--pcih-gold);font-weight:600;margin-bottom:16px;
  animation:pcihRise .8s cubic-bezier(.22,1,.36,1) both;
}
#pci-hero .pcih-h1{
  font-family:var(--pcih-display);font-weight:500;
  font-size:clamp(30px, 4.8vw, 58px);
  line-height:1.12;letter-spacing:-.02em;text-wrap:balance;
  animation:pcihRise .8s cubic-bezier(.22,1,.36,1) both;
}
#pci-hero .pcih-h1 .ink{color:var(--pcih-ink);font-weight:600}
#pci-hero .pcih-h1 .soft{color:var(--pcih-muted)}

/* ---- search capsule ---- */
#pci-hero .pcih-ask{
  animation:pcihRise .8s cubic-bezier(.22,1,.36,1) .15s both;
  margin-top:34px;max-width:520px;
  background:#fff;border:1px solid rgba(0,0,0,.05);border-radius:10px;
  padding:5px 5px 5px 18px;display:flex;align-items:center;gap:10px;
  box-shadow:0 1px 3px rgba(21,41,63,.06);
}
#pci-hero .pcih-ask input{
  flex:1;border:0;outline:0;background:transparent;
  font:inherit;font-size:15px;color:var(--pcih-ink);min-width:0;
}
#pci-hero .pcih-ask input::placeholder{color:var(--pcih-muted)}
#pci-hero .pcih-ask button{
  flex:none;background:var(--pcih-ink);color:#fff;width:38px;height:38px;border-radius:50%;
  border:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  transition:transform .2s, background .2s;
}
#pci-hero .pcih-ask button:hover{background:var(--pcih-gold);transform:translateX(2px)}

/* ---- trust line ---- */
#pci-hero .pcih-trust{
  animation:pcihRise .8s cubic-bezier(.22,1,.36,1) .22s both;
  margin-top:16px;display:inline-flex;align-items:center;gap:8px;
  font-size:13px;color:var(--pcih-ink);
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.7);border-radius:999px;
  padding:8px 16px;box-shadow:0 2px 10px rgba(21,41,63,.08);
}
#pci-hero .pcih-trust svg{flex:none}

/* ---- proof chips ---- */
#pci-hero .pcih-chips{
  animation:pcihRise .8s cubic-bezier(.22,1,.36,1) .3s both;
  margin-top:60px;display:flex;flex-wrap:wrap;gap:12px;
}
@media (min-width:640px){#pci-hero .pcih-chips{margin-top:9vh}}
#pci-hero .pcih-chip{
  display:inline-flex;align-items:center;gap:9px;
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.7);
  border-radius:999px;padding:10px 18px;
  font-size:13px;font-weight:500;color:var(--pcih-ink);
  box-shadow:0 2px 10px rgba(21,41,63,.08);
}
#pci-hero .pcih-chip b{font-weight:700}
#pci-hero .pcih-chip .dot{width:8px;height:8px;border-radius:50%;flex:none}

/* ---- intelligence layer ---- */
#pci-hero .pcih-intel{position:absolute;inset:0;z-index:4;pointer-events:none}
@media (max-width:639px){
  #pci-hero .pcih-intel .blob,#pci-hero .pcih-brain{display:none}
}
#pci-hero .pcih-intel .blob{
  position:absolute;left:var(--x);top:var(--y);width:360px;height:360px;
  transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle, rgba(var(--c),.30), rgba(var(--c),0) 65%);
  filter:blur(4px);
  animation:pcihBlob 9s ease-in-out infinite var(--d,0s);
}
#pci-hero .pcih-chart{position:absolute;left:0;bottom:4vh;width:100%;height:36vh}
#pci-hero .pcih-chart .area{fill:rgba(194,144,42,.12);opacity:0;animation:pcihFade 1.4s ease 2.6s forwards}
#pci-hero .pcih-chart .line{
  fill:none;stroke:var(--pcih-gold);stroke-width:3.5;stroke-linecap:round;
  filter:drop-shadow(0 0 6px rgba(255,255,255,.9));
  stroke-dasharray:2600;stroke-dashoffset:2600;
  animation:pcihDraw 2.8s cubic-bezier(.4,0,.2,1) 1.2s forwards;
}
#pci-hero .pcih-chart .proj{
  fill:none;stroke:var(--pcih-green);stroke-width:3;stroke-linecap:round;stroke-dasharray:3 14;
  filter:drop-shadow(0 0 6px rgba(255,255,255,.9));
  opacity:0;animation:pcihFade 1s ease 3.4s forwards;
}
#pci-hero .pcih-chart .pt{fill:#fff;stroke:var(--pcih-gold);stroke-width:3;opacity:0;animation:pcihFade .6s ease forwards}
#pci-hero .pcih-chart .pt.p1{animation-delay:2.2s}
#pci-hero .pcih-chart .pt.p2{animation-delay:2.9s}
#pci-hero .pcih-chart .pt.p3{animation-delay:3.6s;stroke:var(--pcih-green)}
#pci-hero .pcih-brain{position:absolute;right:6%;top:80vh;width:230px;height:auto;opacity:0;animation:pcihFade 1.6s ease 2s forwards}
#pci-hero .pcih-brain line{stroke:rgba(21,41,63,.45);stroke-width:1.2}
#pci-hero .pcih-brain circle{
  fill:rgba(255,255,255,.9);stroke:var(--pcih-ink);stroke-width:1.6;
  transform-box:fill-box;transform-origin:center;
  animation:pcihNode 3.6s ease-in-out infinite var(--d,0s);
}
#pci-hero .pcih-brain text{font-family:var(--pcih-display);font-size:13px;font-weight:700;fill:var(--pcih-ink)}
#pci-hero .pcih-brain .tag{fill:rgba(255,255,255,.85);stroke:rgba(21,41,63,.25);stroke-width:1}

/* ---- zone data pins ---- */
#pci-hero .pcih-pins{position:absolute;inset:0;z-index:5;pointer-events:none;display:none}
@media (min-width:640px){#pci-hero .pcih-pins{display:block}}
#pci-hero .pcih-pin{
  position:absolute;left:var(--x);top:var(--y);
  display:flex;flex-direction:column;gap:1px;
  background:rgba(255,255,255,.62);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.78);border-radius:12px;
  padding:10px 16px 10px 26px;
  box-shadow:0 4px 18px rgba(21,41,63,.14);
  animation:pcihRise .9s cubic-bezier(.22,1,.36,1) both var(--d), pcihFloat 7s ease-in-out infinite calc(var(--d) + .9s);
}
#pci-hero .pcih-pin::before{
  content:"";position:absolute;left:11px;top:15px;
  width:8px;height:8px;border-radius:50%;background:var(--c);
  box-shadow:0 0 0 3px rgba(255,255,255,.55);
}
#pci-hero .pcih-pin b{font-size:13px;font-weight:700;color:var(--pcih-ink);line-height:1.2}
#pci-hero .pcih-pin span{font-size:12px;color:var(--pcih-ink);opacity:.72;line-height:1.2}

/* ---- edge anchors ---- */
#pci-hero .pcih-lang{
  position:absolute;right:22px;top:50%;transform:translateY(-50%);z-index:20;
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.5);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.7);border-radius:999px;padding:9px 16px;
  font-size:12.5px;letter-spacing:.04em;box-shadow:0 2px 10px rgba(21,41,63,.08);
}
#pci-hero .pcih-lang a{color:var(--pcih-ink);text-decoration:none}
#pci-hero .pcih-lang a.is-on{font-weight:700}
#pci-hero .pcih-lang span{color:rgba(21,41,63,.45)}
@media (max-width:639px){
  #pci-hero .pcih-lang{top:auto;bottom:72px;right:16px;transform:none}
}
#pci-hero .pcih-corner{
  position:absolute;bottom:26px;z-index:20;
  font-size:12px;letter-spacing:.05em;color:var(--pcih-ink);opacity:.75;text-transform:lowercase;
}
#pci-hero .pcih-corner.left{left:32px}
#pci-hero .pcih-corner.right{right:32px}

/* ---- compact variant: [pci_hero compact="yes"] ---- */
#pci-hero.pcih-compact{min-height:100vh}
@media (min-width:640px){#pci-hero.pcih-compact{min-height:100vh}}
#pci-hero.pcih-compact .pcih-video{top:12vh;height:88vh}
@media (min-width:640px){#pci-hero.pcih-compact .pcih-video{top:14vh;height:86vh}}
#pci-hero.pcih-compact .pcih-content{margin-top:11vh}
#pci-hero.pcih-compact .pcih-chips{margin-top:6vh}
#pci-hero.pcih-compact .pcih-pin{display:none}
#pci-hero.pcih-compact .pcih-pin:nth-child(1),
#pci-hero.pcih-compact .pcih-pin:nth-child(2){display:flex;--y:74vh}
#pci-hero.pcih-compact .pcih-pin:nth-child(2){--y:66vh}
#pci-hero.pcih-compact .pcih-brain{top:58vh}
#pci-hero.pcih-compact .pcih-chart{bottom:2vh;height:28vh}
