/* KONAI v11 — alignment, interaction and polish pass */

/* 1. Global alignment primitives: keep every chapter on the same content rail. */
.lustro-inspired .section-heading{
  width:min(calc(100% - (var(--k-page-gutter) * 2)),var(--k-max))!important;
  margin-inline:auto!important;
  margin-top:0!important;
  margin-bottom:clamp(34px,4.6vw,64px)!important;
  padding-inline:0!important;
}
.lustro-inspired .section-heading>div{min-width:0!important;padding-top:5px!important}
.lustro-inspired .section-index,.lustro-inspired .section-note{margin-left:0!important;text-align:left!important}
.lustro-inspired svg{vertical-align:middle}
.lustro-inspired .card-icon svg,.lustro-inspired .solution-symbol svg,.lustro-inspired .workflow-icon svg,
.v10-chapter-dock svg,.lustro-inspired .problem-grid article>svg{display:block!important;margin:auto!important}

/* 2. Translucent chapter dock: visible without masking content underneath. */
.v10-chapter-dock{
  right:18px!important;
  padding:7px!important;
  gap:6px!important;
  border-color:rgba(137,202,235,.18)!important;
  background:rgba(4,13,25,.28)!important;
  -webkit-backdrop-filter:blur(10px) saturate(1.15)!important;
  backdrop-filter:blur(10px) saturate(1.15)!important;
  box-shadow:0 14px 44px rgba(0,0,0,.15),inset 0 1px rgba(255,255,255,.035)!important;
}
.v10-chapter-dock button{background:rgba(4,13,25,.12)!important;color:rgba(176,206,229,.66)!important}
.v10-chapter-dock button:hover{background:rgba(97,220,255,.13)!important;color:#e9faff!important;border-color:rgba(97,220,255,.18)!important}
.v10-chapter-dock button.is-active{background:rgba(120,228,255,.82)!important;color:#06101d!important;box-shadow:0 0 0 1px rgba(255,255,255,.34),0 0 26px rgba(97,220,255,.24)!important}

/* 3. Hero marquee: centered vertically and consistently spaced. */
.lustro-inspired .hero-marquee{display:flex!important;align-items:center!important;overflow:hidden!important}
.lustro-inspired .hero-marquee>div{
  height:100%!important;padding:0!important;display:flex!important;align-items:center!important;
  gap:clamp(24px,3vw,44px)!important;line-height:1!important;will-change:transform
}
.lustro-inspired .hero-marquee span,.lustro-inspired .hero-marquee i{display:inline-flex!important;align-items:center!important;height:100%!important;line-height:1!important}
.lustro-inspired .hero-marquee i{font-size:12px!important}

/* 4. Why-now permission visual and owner/user cards. */
.lustro-inspired .problem-visual{border:1px solid var(--k-line)!important;border-radius:26px!important;background:linear-gradient(145deg,rgba(10,29,49,.82),rgba(5,15,27,.72))!important;padding:clamp(12px,2vw,22px)!important;display:grid!important;place-items:center!important;overflow:hidden!important}
.lustro-inspired .problem-visual svg{width:100%!important;height:auto!important;max-height:390px!important;display:block!important}
.lustro-inspired .perspective-duo{grid-template-columns:minmax(0,1fr) 112px minmax(0,1fr)!important;align-items:stretch!important;gap:12px!important}
.lustro-inspired .perspective-card{min-width:0!important;display:flex!important;flex-direction:column!important;justify-content:center!important;overflow:hidden!important}
.lustro-inspired .perspective-link{display:grid!important;grid-template-columns:1fr!important;grid-template-rows:1fr auto 1fr!important;place-items:center!important;gap:10px!important;padding:8px 0!important}
.lustro-inspired .perspective-link i{width:1px!important;height:100%!important;min-height:28px!important;background:linear-gradient(transparent,rgba(97,220,255,.5),transparent)!important}
.lustro-inspired .perspective-link b{font:650 8px/1 var(--k-mono)!important;color:var(--k-gold)!important;letter-spacing:.12em!important;writing-mode:horizontal-tb!important}

/* 5. Problem cards: remove legacy spacing/hover artefacts and keep icon-number-content as one unit. */
.lustro-inspired .why .problem-grid article{
  min-height:170px!important;display:grid!important;grid-template-columns:38px minmax(0,1fr)!important;
  grid-template-rows:auto auto 1fr!important;column-gap:14px!important;row-gap:5px!important;align-content:start!important;
  padding:20px!important;overflow:hidden!important;transform:none!important
}
.lustro-inspired .why .problem-grid article>span{grid-column:1!important;grid-row:1!important;align-self:center!important;color:var(--k-cyan)!important;margin:0!important}
.lustro-inspired .why .problem-grid article>svg{grid-column:1!important;grid-row:2 / span 2!important;width:28px!important;height:28px!important;margin:4px 0 0!important;stroke:var(--k-cyan)!important;fill:none!important}
.lustro-inspired .why .problem-grid h3{grid-column:2!important;grid-row:1!important;margin:0!important;align-self:center!important}
.lustro-inspired .why .problem-grid .progressive-content{grid-column:2!important;grid-row:2 / span 2!important;margin:0!important;padding:0!important;background:transparent!important;box-shadow:none!important}
.lustro-inspired .why .problem-grid .progressive-inner{padding:0!important;margin:0!important;background:transparent!important;border:0!important;box-shadow:none!important}
.lustro-inspired .why .problem-grid p{margin:5px 0 0!important}
.lustro-inspired .why .problem-grid article:hover{transform:none!important;box-shadow:inset 0 0 0 1px rgba(97,220,255,.06)!important}

/* 6. Trust layer: four cards react on hover, focus and click without moving layout. */
.lustro-inspired .trust-step{position:relative!important;overflow:hidden!important;isolation:isolate!important}
.lustro-inspired .trust-step::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at 20% 10%,rgba(97,220,255,.12),transparent 45%);opacity:0;transition:opacity .2s;z-index:-1}
.lustro-inspired .trust-step:hover,.lustro-inspired .trust-step:focus-visible{background:rgba(13,35,58,.82)!important;border-color:rgba(97,220,255,.42)!important;transform:none!important;outline:none!important}
.lustro-inspired .trust-step:hover::before,.lustro-inspired .trust-step:focus-visible::before,.lustro-inspired .trust-step.is-active::before{opacity:1}
.lustro-inspired .trust-step.is-active{box-shadow:0 0 0 1px rgba(97,220,255,.08),0 18px 50px rgba(0,0,0,.22)!important}

/* 7. Founding / limited access must be seen immediately. */
.lustro-inspired .audience-hero-note{
  margin-top:26px!important;padding:14px 18px!important;border:1px solid rgba(255,213,74,.42)!important;border-radius:18px!important;
  background:linear-gradient(100deg,rgba(255,213,74,.16),rgba(97,220,255,.08),rgba(170,134,255,.08))!important;
  box-shadow:0 0 0 1px rgba(255,213,74,.04),0 18px 60px rgba(0,0,0,.2),inset 0 1px rgba(255,255,255,.06)!important;
  color:#f4e4a2!important;font-size:11px!important;display:flex!important;justify-content:space-between!important;align-items:center!important;gap:14px!important
}
.lustro-inspired .audience-hero-note::before{content:"LIMITED ACCESS";flex:0 0 auto;padding:7px 10px;border-radius:999px;background:var(--k-gold)!important;color:#07111f!important;font:800 8px/1 var(--k-mono)!important;letter-spacing:.12em!important;box-shadow:0 0 24px rgba(255,213,74,.25)}
.lustro-inspired .audience-hero-note b{color:#fff7cf!important}

/* 8. Audience problem section: deterministic hover, aligned cards, no accidental inner white surfaces. */
.lustro-inspired .risk-card{overflow:hidden!important;display:flex!important;flex-direction:column!important;justify-content:flex-start!important}
.lustro-inspired .risk-card .progressive-content,.lustro-inspired .risk-card .progressive-inner{background:transparent!important;border:0!important;box-shadow:none!important;padding-left:0!important;padding-right:0!important}
.lustro-inspired .risk-card:hover,.lustro-inspired .risk-card:focus-visible,.lustro-inspired .risk-card.is-active{outline:none!important;transform:none!important}

/* 9. KONAI infrastructure: brighter hierarchy + graphical capability nodes. */
.lustro-inspired .solution-shell{border-radius:30px!important;overflow:hidden!important}
.lustro-inspired .solution-head>p{color:#b7cbe0!important;font-size:12px!important}
.lustro-inspired .solution-column{border-radius:22px!important;margin:8px!important;border:1px solid rgba(159,199,235,.16)!important;min-height:390px!important;background:linear-gradient(145deg,rgba(14,36,60,.7),rgba(7,20,35,.52))!important}
.lustro-inspired .solution-column:last-child{border-right:1px solid rgba(159,199,235,.16)!important}
.lustro-inspired .solution-column h3{color:#f7fbff!important}
.lustro-inspired .solution-column .capability-count{color:#91e7ff!important}
.lustro-inspired .solution-column .progressive-content,.lustro-inspired .solution-column .progressive-inner{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important}
.lustro-inspired .solution-column ul{list-style:none!important;margin:20px 0 0!important;padding:0!important;display:grid!important;gap:10px!important}
.lustro-inspired .solution-column li{position:relative!important;margin:0!important;padding:12px 12px 12px 42px!important;border:1px solid rgba(159,199,235,.12)!important;border-radius:14px!important;background:rgba(255,255,255,.025)!important;color:#bed0e0!important;min-height:46px!important;display:flex!important;align-items:center!important}
.lustro-inspired .solution-column li::before{content:"";position:absolute;left:13px;top:50%;width:16px;height:16px;transform:translateY(-50%);border-radius:6px;background:radial-gradient(circle at 35% 35%,#fff 0 8%,var(--k-cyan) 10% 28%,rgba(97,220,255,.16) 30% 100%);box-shadow:0 0 18px rgba(97,220,255,.22)}
.lustro-inspired .solution-columns{gap:0!important;padding:0 8px 8px!important}
.lustro-inspired .solution-footer{color:#a9bfd2!important}.lustro-inspired .solution-footer b{color:#fff!important}

/* 10. Workflow stage: concentric ring is mathematically centered on the icon. */
.lustro-inspired .workflow-stage{overflow:hidden!important}
.lustro-inspired .workflow-stage-core{position:relative!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;padding-left:0!important;text-align:center!important}
.lustro-inspired .workflow-ring{position:absolute!important;left:50%!important;top:42%!important;transform:translate(-50%,-50%)!important;margin:0!important;border-radius:50%!important;animation:v11PulseRing 4.5s ease-in-out infinite!important}
.lustro-inspired .workflow-icon{position:relative!important;z-index:2!important;display:grid!important;place-items:center!important;margin:0 auto!important}
.lustro-inspired .workflow-stage-core h3{position:relative!important;z-index:2!important;margin:28px auto 0!important;text-align:center!important;max-width:90%!important}
@keyframes v11PulseRing{0%,100%{opacity:.52;scale:1}50%{opacity:.9;scale:1.045}}

/* 11. Founding benefits: eliminate white strips; make the system consistent and graphical. */
.lustro-inspired .founding-grid{gap:12px!important}
.lustro-inspired .founding-card{position:relative!important;overflow:hidden!important;min-height:230px!important;border-radius:22px!important;background:linear-gradient(150deg,rgba(13,34,58,.80),rgba(6,18,32,.68))!important;padding:22px!important;box-shadow:inset 0 1px rgba(255,255,255,.035)!important}
.lustro-inspired .founding-card::after{content:"";position:absolute;width:110px;height:110px;right:-34px;top:-34px;border-radius:50%;border:1px solid rgba(97,220,255,.16);box-shadow:0 0 0 18px rgba(97,220,255,.025),0 0 0 36px rgba(97,220,255,.018);pointer-events:none}
.lustro-inspired .founding-card .progressive-content,.lustro-inspired .founding-card .progressive-inner{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;margin:0!important}
.lustro-inspired .founding-card p{background:transparent!important;color:#a9bdd0!important;margin-top:22px!important;padding:0!important}
.lustro-inspired .founding-card:hover{background:linear-gradient(150deg,rgba(16,43,70,.92),rgba(7,21,37,.76))!important;border-color:rgba(97,220,255,.32)!important;transform:translateY(-2px)!important}
.lustro-inspired .founding-card>span{display:inline-grid!important;place-items:center!important;width:30px!important;height:30px!important;border-radius:10px!important;background:rgba(97,220,255,.08)!important;border:1px solid rgba(97,220,255,.14)!important}

/* 12. Consistent rounded visual surfaces. */
.lustro-inspired .risk-list,.lustro-inspired .workflow-steps,.lustro-inspired .solution-columns,
.lustro-inspired .pilot-benefits,.lustro-inspired .audience-proof,.lustro-inspired .identity-stack-foot{border-radius:22px!important}
.lustro-inspired .progressive-content,.lustro-inspired .progressive-inner{max-width:100%!important}

/* 13. Identity SVG strips in hero: equal height, equal baseline, no overflow. */
.lustro-inspired .identity-rights-stack{align-items:stretch!important}
.lustro-inspired .identity-rights-stack article{min-width:0!important;overflow:hidden!important;border-radius:16px!important}
.lustro-inspired .identity-rights-stack img{display:block!important;width:100%!important;height:44px!important;object-fit:contain!important;object-position:center!important;margin:0 auto!important}

/* 14. FAQ: strong active tab/focus treatment and dock button visibility. */
.lustro-inspired .faq-tabs button:hover,.lustro-inspired .faq-tabs button:focus-visible{color:#ecfbff!important;border-color:rgba(97,220,255,.38)!important;background:rgba(97,220,255,.09)!important;outline:none!important}
.lustro-inspired .faq-tabs button.is-active{background:linear-gradient(135deg,var(--k-cyan),#b6efff)!important;color:#06111f!important;border-color:rgba(255,255,255,.35)!important;box-shadow:0 8px 26px rgba(97,220,255,.16)!important}

@media (max-width:960px){
  .lustro-inspired .perspective-duo{grid-template-columns:1fr!important}
  .lustro-inspired .perspective-link{grid-template-columns:1fr auto 1fr!important;grid-template-rows:1fr!important;min-height:44px!important}
  .lustro-inspired .perspective-link i{width:100%!important;height:1px!important;min-height:0!important}
  .lustro-inspired .solution-column{margin:7px 0!important}
  .lustro-inspired .audience-hero-note{align-items:flex-start!important;flex-direction:column!important}
}
@media (max-width:640px){
  .lustro-inspired .why .problem-grid article{grid-template-columns:32px 1fr!important;padding:17px!important}
  .lustro-inspired .hero-marquee>div{gap:22px!important}
}