/* =========================================================================
   YSRA — extended sections (showcase, gallery, bento, compare, faq, etc.)
   ========================================================================= */

/* ---------- window chrome (reused for showcase/mockups) ---------- */
.winframe{border:1px solid var(--line-strong);border-radius:16px;overflow:hidden;background:var(--surface);box-shadow:var(--shadow-lg)}
.winbar{display:flex;align-items:center;gap:.7rem;padding:.8rem 1.1rem;border-bottom:1px solid var(--line);background:var(--panel)}
.winbar .tl{display:flex;gap:.45rem}
.winbar .tl i{width:11px;height:11px;border-radius:50%;background:var(--line-strong)}
.winbar .wurl{font-family:'JetBrains Mono',monospace;font-size:.74rem;color:var(--muted);margin-left:.5rem;flex:1}
.winbar .wlive{font-family:'JetBrains Mono',monospace;font-size:.7rem;color:var(--accent);display:flex;align-items:center;gap:.4em}

/* ---------- product showcase ---------- */
.showcase{position:relative;overflow:hidden}
.showcase .glow{position:absolute;top:20%;left:50%;width:70vw;height:40vw;transform:translateX(-50%);background:radial-gradient(ellipse,var(--accent-glow),transparent 65%);pointer-events:none}
.showcase-frame{position:relative;z-index:2;max-width:1080px;margin:0 auto}
.showcase-frame .winframe img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top center}
.showcase-cap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;margin-top:1.6rem;color:var(--muted)}
.showcase-cap .mono{font-size:.78rem;letter-spacing:.04em}

/* ---------- what you can build (gallery) ---------- */
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.gcard{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--surface);transition:transform .4s cubic-bezier(.2,.8,.2,1),border-color .4s,box-shadow .4s}
.gcard:hover{transform:translateY(-5px);border-color:var(--line-strong);box-shadow:var(--shadow-lg)}
.gcard .shot{display:block;width:100%;aspect-ratio:16/11;position:relative;overflow:hidden;background:var(--panel-2);border-bottom:1px solid var(--line)}
.gcard image-slot{display:block;width:100%;height:100%}
.gcard .gmeta{padding:1.1rem 1.2rem;display:flex;flex-direction:column;gap:.35rem}
.gcard .shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.gcard .gtag{font-family:'JetBrains Mono',monospace;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.gcard h3{font-size:1.15rem}
.gcard p{color:var(--text-soft);font-size:.9rem}
/* designed mini-mock fallback inside .shot */
.mock{position:absolute;inset:0;padding:1rem;display:flex;flex-direction:column;gap:.6rem}
.mock .mrow{display:flex;gap:.5rem}
.mock .mblock{background:var(--panel);border:1px solid var(--line);border-radius:7px}
.mock .mac{background:var(--accent);opacity:.85}
.mock .mc-side{width:26%;border-radius:7px;background:var(--panel);border:1px solid var(--line)}

/* ---------- bento ---------- */
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:200px;gap:1.1rem}
.bento .b{border:1px solid var(--line);border-radius:16px;background:var(--surface);padding:1.6rem;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;transition:border-color .4s,transform .4s}
.bento .b:hover{border-color:var(--line-strong);transform:translateY(-3px)}
.bento .b .bk{font-family:'JetBrains Mono',monospace;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:.5rem}
.bento .b h3{font-size:1.2rem;margin-bottom:.4rem}
.bento .b p{color:var(--text-soft);font-size:.9rem;max-width:34ch}
.bento .b-wide{grid-column:span 2}
.bento .b-tall{grid-row:span 2}
.bento .b-2{grid-column:span 2}
.b-art{position:absolute;inset:0;pointer-events:none;opacity:.9}
.b-glow{position:absolute;width:60%;height:60%;border-radius:50%;background:radial-gradient(circle,var(--accent-glow),transparent 70%);top:-10%;right:-10%}
/* mini venn art for bento */
.b-venn{position:absolute;top:1.3rem;right:1.3rem;width:64px;height:64px;opacity:.9}
.b-venn .ring{fill:none;stroke:var(--ring);stroke-width:7;opacity:.5}
.b-venn .core{fill:var(--accent)}
.b-bars{position:absolute;top:1.4rem;left:1.6rem;right:1.6rem;display:flex;gap:.4rem;align-items:flex-end;height:46px;opacity:.7}
.b-bars i{flex:1;background:var(--accent);border-radius:3px;opacity:.5}

/* ---------- comparison ---------- */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.comp-col{border:1px solid var(--line);border-radius:16px;padding:2rem 1.8rem;background:var(--surface)}
.comp-col.them{opacity:.92}
.comp-col.us{border-color:color-mix(in srgb,var(--accent) 45%,transparent);background:linear-gradient(180deg,var(--accent-glow),transparent 60%)}
.comp-col h3{font-size:1.3rem;margin-bottom:.4rem;display:flex;align-items:center;gap:.6rem}
.comp-tag{font-family:'JetBrains Mono',monospace;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:1.4rem;display:block}
.comp-col.us .comp-tag{color:var(--accent)}
.comp-list{list-style:none;display:flex;flex-direction:column;gap:1rem}
.comp-list li{display:flex;gap:.7rem;align-items:flex-start;color:var(--text-soft);font-size:.96rem}
.comp-list li .ci{flex:none;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:.7rem;margin-top:1px}
.comp-col.them .ci{border:1px solid var(--line-strong);color:var(--muted)}
.comp-col.us .ci{background:var(--accent);color:var(--accent-ink)}

/* ---------- integrations strip ---------- */
.integ{border-block:1px solid var(--line);overflow:hidden;padding-block:2.4rem;background:var(--bg-2)}
.integ-head{text-align:center;margin-bottom:1.8rem;color:var(--muted);font-family:'JetBrains Mono',monospace;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase}
.integ-track-wrap{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.integ-track{display:flex;gap:1rem;width:max-content;animation:scrollX 36s linear infinite}
@media (prefers-reduced-motion:reduce){.integ-track{animation:none;flex-wrap:wrap;justify-content:center}}
.integ-pill{display:flex;align-items:center;gap:.6rem;border:1px solid var(--line-strong);border-radius:10px;padding:.7rem 1.1rem;color:var(--text-soft);font-weight:500;white-space:nowrap;background:var(--surface)}
.integ-pill .idot{width:9px;height:9px;border-radius:3px;background:var(--accent)}

/* ---------- FAQ ---------- */
.faq{max-width:820px;margin-inline:auto;display:flex;flex-direction:column;gap:.7rem}
.faq details{border:1px solid var(--line);border-radius:12px;background:var(--surface);overflow:hidden;transition:border-color .3s}
.faq details[open]{border-color:var(--line-strong)}
.faq summary{list-style:none;cursor:pointer;padding:1.2rem 1.4rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:1.05rem;letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary .fq-ico{flex:none;width:22px;height:22px;border-radius:6px;border:1px solid var(--line-strong);display:grid;place-items:center;color:var(--accent);transition:transform .3s,background .3s}
.faq details[open] summary .fq-ico{transform:rotate(45deg);background:var(--accent-glow)}
.faq .fq-body{padding:0 1.4rem 1.3rem;color:var(--text-soft);font-size:.97rem;line-height:1.6;max-width:64ch}

/* ---------- split-media image fill ---------- */
.split-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.split-media.shot{aspect-ratio:16/10;background:var(--panel)}

/* ---------- security / trust blocks ---------- */
.trust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.trust{border:1px solid var(--line);border-radius:14px;padding:1.8rem 1.6rem;background:var(--surface);display:flex;flex-direction:column;gap:.7rem}
.trust .ti{width:38px;height:38px;border-radius:10px;background:var(--accent-glow);border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);display:grid;place-items:center;color:var(--accent);font-size:1.1rem;margin-bottom:.3rem}
.trust h3{font-size:1.15rem}
.trust p{color:var(--text-soft);font-size:.92rem}
.badge-row{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;margin-top:2.5rem}
.tbadge{font-family:'JetBrains Mono',monospace;font-size:.74rem;letter-spacing:.06em;color:var(--text-soft);border:1px solid var(--line-strong);border-radius:999px;padding:.55em 1.1em;display:flex;align-items:center;gap:.5em}
.tbadge .bdot{width:7px;height:7px;border-radius:50%;background:var(--accent)}

/* ---------- manifesto page ---------- */
.man-quote{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:clamp(1.6rem,3.6vw,2.8rem);line-height:1.22;letter-spacing:-.02em;max-width:24ch}
.man-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:1rem}
.value{border-top:1px solid var(--line-strong);padding-top:1.2rem}
.value .vnum{font-family:'JetBrains Mono',monospace;font-size:.74rem;color:var(--accent);letter-spacing:.12em;margin-bottom:.7rem}
.value h3{font-size:1.25rem;margin-bottom:.5rem}
.value p{color:var(--text-soft);font-size:.95rem}

/* ---------- docs shell ---------- */
.docs-layout{display:grid;grid-template-columns:230px 1fr;gap:3rem;align-items:start}
.docs-side{position:sticky;top:100px;display:flex;flex-direction:column;gap:.3rem}
.docs-side .ds-group{font-family:'JetBrains Mono',monospace;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:1.3rem 0 .5rem}
.docs-side a{padding:.4rem .7rem;border-radius:8px;color:var(--text-soft);font-size:.93rem;transition:background .25s,color .25s}
.docs-side a:hover{background:var(--panel);color:var(--text)}
.docs-side a.active{background:var(--accent-glow);color:var(--accent)}
.docs-main h2{font-size:1.9rem;margin-bottom:1rem}
.docs-main h3{font-size:1.25rem;margin:2rem 0 .8rem}
.docs-main p{color:var(--text-soft);margin-bottom:1rem;max-width:70ch}
.docs-card{border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:1.4rem 1.5rem;margin:1.2rem 0}
.code-block{background:#0B0C0E;border:1px solid var(--line);border-radius:12px;padding:1.2rem 1.4rem;font-family:'JetBrains Mono',monospace;font-size:.82rem;line-height:1.7;color:#cfd2da;overflow-x:auto;margin:1rem 0}
[data-theme="light"] .code-block{background:#14161C;color:#cfd2da}
.code-block .ck{color:var(--accent-2)}
.code-block .cc{color:var(--muted)}
.docs-tag{display:inline-block;font-family:'JetBrains Mono',monospace;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);border-radius:999px;padding:.3em .8em;margin-bottom:1rem}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .gallery-grid{grid-template-columns:repeat(2,1fr)}
  .bento{grid-template-columns:repeat(2,1fr);grid-auto-rows:auto}
  .bento .b{min-height:180px}
  .bento .b-wide,.bento .b-2,.bento .b-tall{grid-column:auto;grid-row:auto}
  .compare{grid-template-columns:1fr}
  .trust-grid{grid-template-columns:1fr 1fr}
  .man-grid{grid-template-columns:1fr}
  .docs-layout{grid-template-columns:1fr;gap:1.5rem}
  .docs-side{position:static;flex-direction:row;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:1rem;margin-bottom:1rem}
  .docs-side .ds-group{width:100%;margin:.5rem 0 .2rem}
}
@media (max-width:560px){
  .gallery-grid{grid-template-columns:1fr}
  .bento{grid-template-columns:1fr}
  .trust-grid{grid-template-columns:1fr}
}