/* Capabilities � decorative PNG backgrounds + HTML/SVG content */

body.page-capabilities{
  background:#05070a url("../assets/cap/cap-page-bg.png") center top/cover fixed;
  color:#c8d4e8;
}
body.page-capabilities::before,
body.page-capabilities::after{display:none}

.cap-page--premium{
  padding:128px 0 88px;
}
.cap-page--premium>.container{
  max-width:1280px;
}

/* Panel */
.cap-deck{
  margin-bottom:32px;
  padding:36px 32px 28px;
  border-radius:20px;
  background:linear-gradient(165deg,rgba(14,22,38,.94) 0%,rgba(6,9,14,.98) 100%);
  border:1px solid rgba(72,130,210,.28);
  box-shadow:0 48px 100px -56px rgba(0,0,0,.92),inset 0 1px 0 rgba(255,255,255,.05);
}
.cap-deck__head{
  margin-bottom:28px;
}
.cap-deck__eyebrow{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 0 12px;
  font-size:13px;
  letter-spacing:.12em;
  color:rgba(240,215,140,.88);
}
.cap-deck__diamond{
  width:8px;
  height:8px;
  background:linear-gradient(135deg,#fff4d0,#c9a227);
  transform:rotate(45deg);
  box-shadow:0 0 10px rgba(201,162,39,.8);
  border-radius:1px;
  animation:diamond-breathe 2.8s ease-in-out infinite;
}
@keyframes diamond-breathe{
  0%,100%{box-shadow:0 0 8px rgba(201,162,39,.55);opacity:.9}
  50%{box-shadow:0 0 16px rgba(201,162,39,.95);opacity:1}
}
.cap-deck__title{
  margin:0;
  font-size:clamp(22px,2.6vw,30px);
  font-weight:700;
  color:#fff;
  line-height:1.35;
}
.cap-deck__sub{
  margin:12px 0 0;
  max-width:720px;
  font-size:15px;
  line-height:1.75;
  color:rgba(255,255,255,.52);
}

/* Steps */
.cap-deck__path{
  display:flex;
  align-items:stretch;
  gap:0;
  margin-bottom:20px;
}
.cap-step{
  flex:1;
  position:relative;
  display:flex;
  flex-direction:column;
  min-height:188px;
  padding:18px 14px 20px;
  margin:0 4px;
  border-radius:14px;
  border:1px solid rgba(72,130,210,.4);
  text-decoration:none;
  color:inherit;
  overflow:hidden;
  transition:transform .35s cubic-bezier(.22,1,.36,1),border-color .35s,box-shadow .35s;
}
.cap-step__bg{
  position:absolute;
  inset:0;
  background:center/cover no-repeat;
  pointer-events:none;
  opacity:1;
  background-image:url("../assets/cap/card-bg-inactive@1x.png");
}
.cap-step__texture{
  position:absolute;
  inset:0;
  background:center/cover no-repeat;
  pointer-events:none;
  opacity:.9;
  mix-blend-mode:screen;
  filter:contrast(1.05) saturate(1.05);
}
.cap-step--wave .cap-step__texture{background-image:url("../assets/cap/bg-card-wave@1x.png")}
.cap-step--dots .cap-step__texture{background-image:url("../assets/cap/bg-card-dots@1x.png")}
.cap-step--grid .cap-step__texture{background-image:url("../assets/cap/bg-card-grid@1x.png")}
.cap-step--lines .cap-step__texture{background-image:url("../assets/cap/bg-card-lines@1x.png")}
.cap-step--arc .cap-step__texture{background-image:url("../assets/cap/bg-card-arc@1x.png")}
.cap-step__glow{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:55%;
  background:center bottom/cover no-repeat;
  background-image:url("../assets/cap/bg-gold-wave.png");
  pointer-events:none;
  opacity:0;
  transition:opacity .4s;
}
.cap-step__no{
  position:relative;
  z-index:2;
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border-radius:50%;
  font-size:13px;
  font-weight:700;
  color:rgba(255,255,255,.9);
  background:rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.15);
}
.cap-step__icon{
  position:absolute;
  top:14px;
  right:12px;
  z-index:3;
  width:50px;
  height:50px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:linear-gradient(155deg,rgba(28,48,78,.55),rgba(10,16,28,.75));
  border:1px solid rgba(90,150,220,.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  overflow:visible;
}
.cap-step__icon svg{
  width:28px;
  height:28px;
  color:#a8c8f2;
  filter:drop-shadow(0 0 8px rgba(90,160,230,.4));
  transition:color .35s,filter .35s,transform .35s;
}
.cap-step__text{
  position:relative;
  z-index:2;
  margin-top:auto;
  padding-top:40px;
}
.cap-step__text b{
  display:block;
  font-size:15px;
  font-weight:600;
  color:#fff;
  line-height:1.35;
}
.cap-step__text i{
  display:block;
  margin-top:6px;
  font-size:12px;
  font-style:normal;
  color:rgba(255,255,255,.48);
  line-height:1.45;
}
.cap-step:hover{
  transform:translateY(-4px);
  border-color:rgba(72,130,210,.55);
}
.cap-step.is-active{
  transform:translateY(-8px);
  border-color:rgba(201,162,39,.85);
  box-shadow:0 0 0 1px rgba(201,162,39,.2),0 20px 48px -16px rgba(201,162,39,.4);
}
.cap-step.is-active .cap-step__bg{background-image:url("../assets/cap/card-bg-active.png")}
.cap-step.is-active .cap-step__glow{opacity:1}
.cap-step.is-active .cap-step__no{
  color:#fff8e0;
  border-color:rgba(201,162,39,.7);
  background:rgba(201,162,39,.2);
  box-shadow:0 0 16px rgba(201,162,39,.45);
}
.cap-step.is-active .cap-step__icon{
  border-color:rgba(212,175,55,.75);
  background-image:linear-gradient(155deg,rgba(201,162,39,.42),rgba(120,90,30,.12));
  box-shadow:0 0 24px rgba(201,162,39,.45),inset 0 0 20px rgba(201,162,39,.12);
}
.cap-step.is-active .cap-step__icon svg{
  color:#ffe9a8;
  filter:drop-shadow(0 0 10px rgba(255,220,140,.65));
  transform:scale(1.04);
  animation:icon-glow-once .65s var(--spring, cubic-bezier(.22,1,.36,1)) both;
}
@keyframes icon-glow-once{
  0%{transform:scale(.92);opacity:.7}
  55%{transform:scale(1.08)}
  100%{transform:scale(1.04);opacity:1}
}
/* Deck path stagger when section enters view */
.cap-deck:not(.in) .cap-step{opacity:0}
.cap-deck.in .cap-step{
  animation:deck-step-in .65s cubic-bezier(.22,1,.36,1) both;
}
.cap-deck.in .cap-step:nth-of-type(1){animation-delay:.06s}
.cap-deck.in .cap-step:nth-of-type(3){animation-delay:.14s}
.cap-deck.in .cap-step:nth-of-type(5){animation-delay:.22s}
.cap-deck.in .cap-step:nth-of-type(7){animation-delay:.3s}
.cap-deck.in .cap-step:nth-of-type(9){animation-delay:.38s}
@keyframes deck-step-in{
  from{opacity:0}
  to{opacity:1}
}
.cap-deck:not(.in) .cap-value{opacity:0}
.cap-deck.in .cap-value{
  animation:deck-value-in .6s cubic-bezier(.22,1,.36,1) both;
}
@keyframes deck-value-in{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:none}
}
.cap-deck.in .cap-value:nth-child(1){animation-delay:.28s}
.cap-deck.in .cap-value:nth-child(2){animation-delay:.36s}
.cap-deck.in .cap-value:nth-child(3){animation-delay:.44s}
.cap-step:focus-visible{
  outline:2px solid #f0d78c;
  outline-offset:3px;
}
.cap-step__arrow{
  flex:none;
  width:20px;
  align-self:center;
  margin-top:48px;
  position:relative;
  height:2px;
  background:linear-gradient(90deg,rgba(72,130,210,.2),rgba(201,162,39,.6));
}
.cap-step__arrow::after{
  content:"";
  position:absolute;
  right:0;
  top:50%;
  width:8px;
  height:8px;
  border-top:2px solid rgba(201,162,39,.7);
  border-right:2px solid rgba(201,162,39,.7);
  transform:translateY(-50%) rotate(45deg);
}

/* Values */
.cap-deck__values{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}
.cap-value{
  display:flex;
  align-items:center;
  gap:16px;
  padding:20px 18px;
  border-radius:14px;
  background:rgba(8,12,20,.6);
  border:1px solid rgba(201,162,39,.28);
  transition:border-color .3s,transform .3s cubic-bezier(.22,1,.36,1);
}
.cap-value:hover{
  border-color:rgba(201,162,39,.5);
  transform:translateY(-3px);
}
.cap-value__icon{
  flex:none;
  width:52px;
  height:52px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:linear-gradient(145deg,rgba(201,162,39,.22),rgba(201,162,39,.05));
  border:1px solid rgba(201,162,39,.38);
  box-shadow:0 0 20px -6px rgba(201,162,39,.4);
}
.cap-value__icon svg{width:24px;height:24px;color:#f0d78c}
.cap-value__body b{
  display:block;
  font-size:16px;
  font-weight:600;
  color:#f0d78c;
  margin-bottom:6px;
}
.cap-value__body p{
  margin:0;
  font-size:12px;
  color:rgba(255,255,255,.52);
  line-height:1.65;
}

/* Detail � stacked crossfade */
.cap-showcase-wrap{margin-bottom:8px}
.cap-showcase{
  position:relative;
  display:grid;
  min-height:320px;
}
.cap-detail{
  grid-area:1/1;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(12px);
  transition:opacity .4s cubic-bezier(.22,1,.36,1),transform .4s cubic-bezier(.22,1,.36,1),visibility 0s linear .4s;
}
.cap-detail.is-active{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:none;
  z-index:1;
  transition:opacity .4s cubic-bezier(.22,1,.36,1),transform .4s cubic-bezier(.22,1,.36,1),visibility 0s;
}
.cap-detail.is-active.is-entering .cap-detail__copy h3,
.cap-detail.is-active.is-entering .cap-detail__desc,
.cap-detail.is-active.is-entering .cap-detail__points,
.cap-detail.is-active.is-entering .cap-detail__value,
.cap-detail.is-active.is-entering .cap-detail__link,
.cap-detail.is-active.is-entering .cap-detail__visual{
  animation:cap-part-in .55s cubic-bezier(.22,1,.36,1) both;
}
.cap-detail.is-active.is-entering .cap-detail__copy h3{animation-delay:.04s}
.cap-detail.is-active.is-entering .cap-detail__desc{animation-delay:.1s}
.cap-detail.is-active.is-entering .cap-detail__points{animation-delay:.16s}
.cap-detail.is-active.is-entering .cap-detail__value{animation-delay:.22s}
.cap-detail.is-active.is-entering .cap-detail__link{animation-delay:.28s}
.cap-detail.is-active.is-entering .cap-detail__visual{animation-delay:.12s}
@keyframes cap-part-in{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}
.cap-detail__panel{
  position:relative;
  padding:36px 40px 32px;
  border-radius:18px;
  background:linear-gradient(165deg,rgba(12,20,34,.9),rgba(5,7,10,.96));
  border:1px solid rgba(72,130,210,.2);
  overflow:hidden;
}
.cap-detail__beam{
  position:absolute;
  left:32px;
  right:32px;
  top:0;
  height:2px;
  background:linear-gradient(90deg,transparent,rgba(201,162,39,.5) 30%,#f5e6b8 50%,rgba(201,162,39,.5) 70%,transparent);
  box-shadow:0 0 14px rgba(201,162,39,.5);
}
.cap-detail__layout{
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:36px;
  align-items:center;
  position:relative;
}
.cap-detail__wm{
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-52%);
  font-size:clamp(140px,16vw,240px);
  font-weight:800;
  color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.05);
  pointer-events:none;
  z-index:0;
}
.cap-detail__copy{position:relative;z-index:1}
.cap-detail__copy h3{
  margin:0 0 12px;
  font-size:clamp(24px,2.8vw,36px);
  font-weight:700;
  color:#fff;
}
.cap-detail__desc{
  margin:0 0 16px;
  font-size:15px;
  line-height:1.85;
  color:rgba(255,255,255,.54);
  max-width:440px;
}
.cap-detail__points{
  margin:0 0 14px;
  padding:0;
  list-style:none;
  display:grid;
  gap:6px;
}
.cap-detail__points li{
  padding-left:14px;
  position:relative;
  font-size:13px;
  color:rgba(255,255,255,.68);
}
.cap-detail__points li::before{
  content:"";
  position:absolute;
  left:0;
  top:.55em;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#c9a227;
}
.cap-detail__value{
  margin:0 0 18px;
  font-size:13px;
  color:rgba(240,215,140,.85);
  max-width:420px;
}
.cap-detail__link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 22px;
  font-size:14px;
  font-weight:600;
  color:#1a1408;
  border-radius:999px;
  background:linear-gradient(145deg,#f5e6b8,#d4af37 50%,#b8860b);
  box-shadow:0 0 22px -6px rgba(201,162,39,.55);
}
.cap-detail__link svg{width:16px;height:16px}
.cap-detail__visual{margin:0;position:relative;z-index:1}
.cap-detail__frame{
  display:block;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(201,162,39,.35);
  box-shadow:0 24px 64px -32px rgba(0,0,0,.85),0 0 32px -16px rgba(201,162,39,.15);
}
.cap-detail__photo{
  display:block;
  width:100%;
  min-height:300px;
  object-fit:cover;
}
.cap-detail__visual figcaption{
  padding:12px 2px 0;
  font-size:12px;
  color:rgba(255,255,255,.5);
}
.cap-detail__visual figcaption b{
  display:block;
  color:#fff;
  font-size:14px;
  margin-bottom:4px;
}
/* Scene extension */
.cap-scenes{
  margin-top:48px;
  padding:36px 32px 32px;
  border-radius:20px;
  border:1px solid rgba(72,130,210,.22);
  background:linear-gradient(165deg,rgba(10,16,28,.92),rgba(5,7,10,.98));
  box-shadow:0 40px 90px -50px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.04);
}
.cap-scenes__head h3{
  margin:12px 0 0;
  font-size:clamp(22px,2.6vw,30px);
  font-weight:700;
  color:#fff;
  line-height:1.35;
}
.cap-scenes__lead{
  margin:14px 0 0;
  max-width:720px;
  font-size:15px;
  line-height:1.78;
  color:rgba(255,255,255,.52);
}
.cap-scenes__flow{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px 6px;
  margin:28px 0 8px;
  padding:14px 18px;
  border-radius:14px;
  background:rgba(0,0,0,.25);
  border:1px solid rgba(72,130,210,.2);
}
.cap-scenes__flow-node{
  font-size:12px;
  font-weight:600;
  letter-spacing:.06em;
  color:rgba(240,215,140,.9);
  padding:6px 12px;
  border-radius:999px;
  border:1px solid rgba(201,162,39,.35);
  background:rgba(201,162,39,.08);
}
.cap-scenes__flow-track{
  position:relative;
  width:clamp(48px,8vw,88px);
  height:2px;
  border-radius:2px;
  background:linear-gradient(90deg,rgba(72,130,210,.2),rgba(201,162,39,.45),rgba(72,130,210,.2));
  overflow:hidden;
}
.cap-scenes__flow-pulse{
  position:absolute;
  top:0;
  left:-30%;
  width:30%;
  height:100%;
  background:linear-gradient(90deg,transparent,#f5e6b8,transparent);
  animation:scene-flow 2.4s ease-in-out infinite;
}
.cap-scenes__flow-pulse--d2{animation-delay:1.2s}
@keyframes scene-flow{
  0%{left:-30%;opacity:0}
  15%{opacity:1}
  85%{opacity:1}
  100%{left:100%;opacity:0}
}
.cap-scenes__grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px;
  margin-top:24px;
}
.cap-scenes__card{
  position:relative;
  display:flex;
  flex-direction:column;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(72,130,210,.35);
  background:rgba(6,10,18,.85);
  text-decoration:none;
  color:inherit;
  transition:transform .4s cubic-bezier(.22,1,.36,1),border-color .4s,box-shadow .4s;
}
.cap-scenes__no{
  position:absolute;
  top:14px;
  left:14px;
  z-index:3;
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  font-size:11px;
  font-weight:700;
  color:#1a1408;
  border-radius:50%;
  background:linear-gradient(145deg,#f5e6b8,#c9a227);
  box-shadow:0 0 0 1px rgba(255,255,255,.25),0 8px 20px -8px rgba(201,162,39,.55);
}
.cap-scenes__media{
  position:relative;
  height:168px;
  overflow:hidden;
}
.cap-scenes__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .65s cubic-bezier(.22,1,.36,1);
}
.cap-scenes__shade{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 35%,rgba(0,0,0,.82));
  pointer-events:none;
  z-index:1;
}
.cap-scenes__shine{
  position:absolute;
  inset:0;
  z-index:2;
  opacity:0;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(201,162,39,.22),transparent 55%);
  transition:opacity .35s;
  pointer-events:none;
}
.cap-scenes__body{
  padding:18px 18px 20px;
  position:relative;
  z-index:1;
}
.cap-scenes__body b{
  display:block;
  font-size:17px;
  font-weight:700;
  color:#fff;
  margin-bottom:6px;
}
.cap-scenes__hint{
  margin:0 0 8px;
  font-size:12px;
  color:rgba(240,215,140,.75);
  line-height:1.5;
}
.cap-scenes__desc{
  margin:0 0 12px;
  font-size:13px;
  line-height:1.7;
  color:rgba(255,255,255,.52);
}
.cap-scenes__tags{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-bottom:14px;
}
.cap-scenes__tags span{
  font-size:11px;
  padding:4px 10px;
  border-radius:999px;
  color:rgba(255,255,255,.62);
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  transition:background .25s,border-color .25s,color .25s;
}
.cap-scenes__more{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  font-weight:600;
  color:#f0d78c;
  transition:gap .25s,color .25s;
}
.cap-scenes__more svg{width:14px;height:14px}
.cap-scenes__card:hover{
  transform:translateY(-6px);
  border-color:rgba(201,162,39,.55);
  box-shadow:0 24px 56px -28px rgba(201,162,39,.35),0 0 0 1px rgba(201,162,39,.12);
}
.cap-scenes__card:hover .cap-scenes__media img{transform:scale(1.06)}
.cap-scenes__card:hover .cap-scenes__shine{opacity:1}
.cap-scenes__card:hover .cap-scenes__tags span{
  border-color:rgba(201,162,39,.35);
  background:rgba(201,162,39,.1);
  color:rgba(255,255,255,.85);
}
.cap-scenes__card:hover .cap-scenes__more{gap:10px;color:#fff6d8}
.cap-scenes__flow.in .cap-scenes__flow-node{
  animation:scene-node-in .5s cubic-bezier(.22,1,.36,1) both;
}
.cap-scenes__flow.in .cap-scenes__flow-node:nth-child(1){animation-delay:.12s}
.cap-scenes__flow.in .cap-scenes__flow-node:nth-child(3){animation-delay:.22s}
.cap-scenes__flow.in .cap-scenes__flow-node:nth-child(5){animation-delay:.32s}
@keyframes scene-node-in{
  from{opacity:0;transform:translateY(8px) scale(.94)}
  to{opacity:1;transform:none}
}

@media(max-width:1024px){
  .cap-deck__path{flex-wrap:wrap;gap:10px}
  .cap-step{flex:1 1 calc(33.33% - 10px);min-width:140px}
  .cap-step__arrow{display:none}
  .cap-deck__values{grid-template-columns:1fr}
  .cap-detail__layout{grid-template-columns:1fr}
  .cap-scenes{padding:28px 20px 24px}
  .cap-scenes__grid{grid-template-columns:1fr}
  .cap-scenes__media{height:200px}
}
@media(max-width:640px){
  .cap-page--premium{padding:112px 0 64px}
  .cap-deck{padding:24px 16px 20px}
  .cap-step{flex:1 1 100%;margin:0}
}

@media(prefers-reduced-motion:reduce){
  .cap-deck__diamond{animation:none}
  .cap-deck:not(.in) .cap-step,
  .cap-deck:not(.in) .cap-value{opacity:1}
  .cap-deck.in .cap-step,
  .cap-deck.in .cap-value{animation:none}
  .cap-detail,.cap-detail.is-active{
    transition:none;
    transform:none;
  }
  .cap-step.is-active .cap-step__icon svg{animation:none}
  .cap-scenes__flow-pulse{animation:none}
  .cap-scenes__flow.in .cap-scenes__flow-node{animation:none}
}