﻿/* Features page: zig-zag sections, each pairs the full capability list with a live UI scene */
.page-hero{padding:88px 0 56px;text-align:center}
.page-hero h1{margin-inline:auto;max-width:900px}
.page-hero h1 em{font-style:italic;font-weight:700;color:var(--brand)}
html[data-theme="dark"] .page-hero h1 em{background:linear-gradient(180deg,#DDD6FE,#8B5CF6);-webkit-background-clip:text;background-clip:text;color:transparent}
.page-hero .lead{margin:18px auto 30px;max-width:620px}
.toc a .ms{font-size:18px;color:var(--brand)}
html[data-theme="dark"] .toc a .ms{color:#C4B5FD}
.toc a{display:inline-flex;align-items:center;gap:7px}
.fa{padding:96px 0;border-bottom:1px solid var(--line)}
.fa:last-of-type{border-bottom:0}
.fa-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:64px;align-items:start}
.fa.rev .fa-grid{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
.fa.rev .fa-text{order:2}
.fa-text .num{display:block;font-size:.8rem;font-weight:700;letter-spacing:.1em;color:var(--brand);margin-bottom:16px}
html[data-theme="dark"] .fa-text .num{color:#C4B5FD}
.fa-tile{width:54px;height:54px;border-radius:15px;margin-bottom:18px}.fa-tile .ms{font-size:28px}
.fa-text h2{font-size:clamp(1.9rem,3.4vw,2.7rem);margin-bottom:14px}
.fa-text .lead{font-size:1.08rem;max-width:46ch}
.fa-list{list-style:none;padding:0;margin:28px 0 0;display:grid;gap:16px}
.fa-list li{display:flex;gap:14px;align-items:flex-start}
.fa-list li:before{content:"";flex:none;width:22px;height:22px;margin-top:2px;border-radius:50%;background:var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4L18 8' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
html[data-theme="dark"] .fa-list li:before{background-color:#7C3AED}
.fa-list b{display:block;color:var(--ink);font-size:1rem;margin-bottom:1px}
.fa-list span{color:var(--muted);font-size:.94rem;line-height:1.5}
.fa-vis{position:sticky;top:112px;min-width:0}
@media (max-width:980px){
  .fa{padding:64px 0}
  .fa-grid,.fa.rev .fa-grid{grid-template-columns:minmax(0,1fr);gap:36px}
  .fa.rev .fa-text{order:0}
  .fa-vis{position:static}
}

/* ---------- polish pass (matches the home page) ---------- */
.page-hero{position:relative;overflow:hidden;padding:84px 0 60px}
.page-hero .wrap{position:relative;z-index:1}
.page-hero .badge{margin-bottom:26px}
.fh-glow{position:absolute;left:50%;top:-10%;width:min(1100px,100%);height:120%;transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(ellipse 55% 55% at 50% 38%,rgba(124,58,237,.30),transparent 72%)}
html[data-theme="light"] .fh-glow{background:radial-gradient(ellipse 55% 55% at 50% 38%,rgba(84,18,196,.13),transparent 72%)}
.page-hero h1,.page-hero .lead,.page-hero .btn{animation:inUp .9s both cubic-bezier(.16,1,.3,1)}
.page-hero .lead{animation-delay:.12s}.page-hero .btn{animation-delay:.24s}

/* jump bar: pills, with soft edges when it scrolls sideways */
.toc{background:color-mix(in srgb,var(--subtle,#fff) 82%,transparent)}
.toc .wrap{gap:8px;padding-block:12px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent)}
.toc a{border:1px solid transparent;transition:background .2s,color .2s,border-color .2s,transform .3s cubic-bezier(.34,1.56,.64,1)}
.toc a:hover{transform:translateY(-2px);border-color:var(--line)}
.toc a.on{border-color:rgba(167,139,250,.5);box-shadow:0 8px 22px -12px rgba(124,58,237,.8)}

/* sections: soft divider, glow behind each preview */
.fa{border-bottom:0;position:relative}
.fa:after{content:"";position:absolute;left:8%;right:8%;bottom:0;height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent)}
.fa:last-of-type:after{display:none}
.fa-vis{isolation:isolate}
.fa-vis:before{content:"";position:absolute;inset:-10% -8%;z-index:-1;pointer-events:none;background:radial-gradient(closest-side,rgba(124,58,237,.30),transparent 74%);filter:blur(34px);opacity:.8;transition:opacity .5s}
html[data-theme="light"] .fa-vis:before{background:radial-gradient(closest-side,rgba(84,18,196,.2),transparent 74%)}
.fa-vis:hover:before{opacity:1}

/* capability lists: padded rows, hover highlight, staggered entrance */
.fa-list{gap:2px;margin-left:-14px;margin-right:-14px}
.fa-list li{padding:12px 14px;border-radius:14px;transition:background .25s,transform .3s cubic-bezier(.16,1,.3,1)}
.fa-list li:before{transition:transform .4s cubic-bezier(.34,1.56,.64,1),box-shadow .3s}
.fa-list li:hover{background:color-mix(in srgb,var(--brand) 9%,transparent)}
.fa-list li:hover:before{transform:scale(1.18) rotate(-6deg);box-shadow:0 6px 16px -4px rgba(124,58,237,.7)}
.fa-list li:hover b{color:var(--brand)}
html[data-theme="dark"] .fa-list li:hover b{color:#DDD6FE}
.fa-list b{transition:color .2s}
.fa-text.rv:not(.in) .fa-list li{opacity:0;transform:translateY(10px)}
.fa-text.in .fa-list li{animation:liIn .6s both cubic-bezier(.16,1,.3,1)}
.fa-text.in .fa-list li:nth-child(1){animation-delay:.12s}.fa-text.in .fa-list li:nth-child(2){animation-delay:.19s}.fa-text.in .fa-list li:nth-child(3){animation-delay:.26s}
.fa-text.in .fa-list li:nth-child(4){animation-delay:.33s}.fa-text.in .fa-list li:nth-child(5){animation-delay:.40s}.fa-text.in .fa-list li:nth-child(6){animation-delay:.47s}
.fa-text.in .fa-list li:nth-child(7){animation-delay:.54s}.fa-text.in .fa-list li:nth-child(8){animation-delay:.61s}
@keyframes liIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.fa-tile{transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
.fa-text:hover .fa-tile{transform:translateY(-3px) rotate(-5deg) scale(1.06)}
@media (max-width:980px){.fa-list{margin-left:-10px;margin-right:-10px}.fa-list li{padding:11px 10px}}
@media (prefers-reduced-motion:reduce){.fa-text.in .fa-list li,.page-hero h1,.page-hero .lead,.page-hero .btn{animation:none}.fa-text.rv:not(.in) .fa-list li{opacity:1;transform:none}}

.fa{overflow-x:clip}
