.landing-showcase { overflow: clip; }
.showcase-intro { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 0 1.5rem; border-top:1px solid var(--line); color:var(--muted); font-size:.72rem; }
.showcase-intro > span:first-child { display:flex; align-items:center; gap:.55rem; color:var(--text); font-size:.62rem; letter-spacing:.1em; }
.showcase-live-dot { width:.35rem; height:.35rem; border-radius:50%; background:var(--cyan); box-shadow:0 0 10px rgba(32,213,255,.4); }
.landing-gallery { display:grid; gap:1.5rem; grid-template-columns:minmax(0,1fr); }
.landing-card { min-width:0; overflow:hidden; border:1px solid var(--line); border-radius:1.2rem; background:var(--surface); transition:transform 300ms var(--ease), border-color 300ms ease; }
.landing-card:hover { transform:translateY(-5px); border-color:rgba(123,60,255,.4); }
.landing-window { position:relative; margin:.65rem .65rem 0; overflow:hidden; border:1px solid var(--line); border-radius:.7rem; }
.landing-chrome { display:flex; align-items:center; justify-content:space-between; gap:.5rem; min-height:2rem; padding:0 .7rem; background:#0d1020; font-size:.55rem; color:var(--muted); }
.window-dots { display:flex; gap:.25rem; }
.window-dots i { width:.3rem; height:.3rem; border-radius:50%; background:#495066; }
.landing-card:hover .window-dots i { background:var(--violet-light); }
.landing-thumbnail { position:relative; overflow:hidden; aspect-ratio:1000/760; background:#060714; }
.landing-thumbnail iframe { display:block; position:absolute; top:0; left:0; width:1000px; height:760px; border:0; transform-origin:top left; pointer-events:none; }
.landing-open-overlay { position:absolute; inset:2rem 0 0; display:flex; align-items:flex-end; justify-content:center; width:100%; border:0; padding:1.2rem; background:transparent; cursor:pointer; }
.landing-open-overlay > span { padding:.55rem .9rem; border:1px solid rgba(255,255,255,.2); border-radius:99px; background:rgba(4,5,15,.87); color:var(--text); backdrop-filter:blur(12px); font-size:.68rem; transform:translateY(10px); opacity:0; transition:opacity 220ms ease, transform 220ms ease; }
.landing-window:hover .landing-open-overlay > span, .landing-open-overlay:focus-visible > span { opacity:1; transform:translateY(0); }
.landing-info { padding:1.25rem; }
.landing-meta { display:flex; align-items:center; justify-content:space-between; gap:.5rem; color:var(--muted); font-size:.6rem; }
.landing-meta > span:first-child { color:var(--cyan); }
.landing-meta > span:last-child { padding:.2rem .4rem; border:1px solid var(--line); border-radius:.3rem; }
.landing-info h3 { margin:.8rem 0 .6rem; font-family:'Plus Jakarta Sans',sans-serif; font-size:1.45rem; line-height:1.25; letter-spacing:-.04em; }
.landing-info h3 small { display:block; margin-top:.25rem; font-family:Inter,sans-serif; color:var(--muted); font-size:.72rem; font-weight:400; letter-spacing:0; }
.landing-info p { min-height:2.8rem; margin:.8rem 0 1rem; color:var(--muted); font-size:.78rem; line-height:1.6; }
.landing-preview-btn { display:flex; width:100%; justify-content:space-between; align-items:center; padding:.8rem 0 0; border:0; border-top:1px solid var(--line); background:transparent; color:var(--text); font-size:.76rem; font-weight:600; cursor:pointer; }
.landing-preview-btn > span { display:grid; place-items:center; width:1.75rem; height:1.75rem; border:1px solid var(--line); border-radius:50%; color:var(--violet-light); transition:background 200ms ease; }
.landing-preview-btn:hover > span { background:var(--violet); color:var(--text); }
.showcase-bottom { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem; margin-top:2rem; padding-top:1.5rem; border-top:1px solid var(--line); font-size:.85rem; }
.showcase-bottom p { margin:0; color:var(--muted); }
.showcase-bottom a { display:flex; gap:.8rem; color:var(--text); }
.showcase-bottom a > span { color:var(--cyan); }
.demo-dialog { width:min(1200px, calc(100% - 2rem)); max-width:none; height:calc(100dvh - 3rem); max-height:900px; padding:0; overflow:hidden; border:1px solid var(--line-strong); border-radius:1rem; background:var(--surface); color:var(--text); box-shadow:0 30px 100px rgba(0,0,0,.6); }
.demo-dialog[open] { display:flex; flex-direction:column; }
.demo-dialog::backdrop { background:rgba(3,4,13,.85); backdrop-filter:blur(10px); }
body.demo-is-open { overflow:hidden; }
.demo-dialog-toolbar { display:flex; align-items:center; gap:1rem; padding:.85rem 1rem; border-bottom:1px solid var(--line); }
.demo-dialog-toolbar > div:first-child { margin-right:auto; }
.demo-dialog-toolbar > div:first-child > span { color:var(--cyan); font-size:.5rem; letter-spacing:.12em; }
.demo-dialog-toolbar h2 { font-size:1rem; margin:0; line-height:1.3; }
.demo-device-controls { display:flex; gap:.2rem; padding:.2rem; border:1px solid var(--line); border-radius:.55rem; }
.demo-device-controls button { border:0; border-radius:.35rem; padding:.35rem .6rem; color:var(--muted); background:transparent; font-size:.65rem; cursor:pointer; }
.demo-device-controls button[aria-pressed=true] { background:var(--violet); color:var(--text); }
.demo-device-controls button[hidden] { display:none; }
.demo-close { width:2rem; height:2rem; border:1px solid var(--line); border-radius:.55rem; background:transparent; color:var(--text); cursor:pointer; }
.demo-viewport { display:flex; flex:1; min-height:0; justify-content:center; overflow:hidden; background:#0d1020; padding:.8rem; }
.demo-viewport iframe { display:block; flex-shrink:0; width:100%; height:100%; border:0; border-radius:.35rem; background:var(--surface); transform-origin:top center; }
.demo-viewport.is-mobile iframe { width:390px; max-width:100%; }
.demo-dialog-footer { display:flex; flex-wrap:wrap; justify-content:space-between; gap:.6rem; padding:.7rem 1rem; font-size:.65rem; color:var(--muted); }
.demo-dialog-footer a { color:var(--cyan); }
.landing-showcase button:focus-visible, .demo-dialog button:focus-visible, .demo-dialog a:focus-visible { outline:2px solid var(--cyan); outline-offset:3px; }
@media(min-width:750px) and (max-width:1099.98px) { .landing-gallery { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(min-width:1100px) { .landing-gallery { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:749px) {
  .landing-thumbnail { aspect-ratio:390/540; }
  .landing-thumbnail iframe { width:390px; height:540px; }
  .demo-device-controls [data-device="desktop"] { display:none; }
  .demo-viewport iframe { width:390px; max-width:100%; }
}
@media(max-width:600px) { .showcase-intro { align-items:flex-start; flex-direction:column; gap:.6rem; } .demo-dialog { width:calc(100% - .8rem); height:calc(100dvh - .8rem); } .demo-dialog-toolbar { flex-wrap:wrap; gap:.6rem; } .demo-device-controls { order:3; width:100%; justify-content:center; } .demo-device-controls button { flex:1; } .demo-viewport { padding:.4rem; } .landing-open-overlay > span { opacity:1; transform:none; font-size:.6rem; } }
@media(prefers-reduced-motion:reduce) { .landing-card, .landing-open-overlay > span, .landing-preview-btn > span { transition:none; } .landing-card:hover { transform:none; } }