/* Syntari landing page */
.landing-body{background:var(--canvas);min-height:100vh}
.landing{--gutter:clamp(20px,3.5vw,56px);width:100%;padding:0 var(--gutter)}
.landing-nav{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100vw;margin-left:calc(50% - 50vw);padding:20px var(--gutter);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--canvas) 92%,transparent);backdrop-filter:blur(12px)}
.landing-brand{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:600;letter-spacing:-.6px}
.landing-brand .brand-mark{width:25px;height:25px}
.landing-nav-links{display:flex;align-items:center;gap:4px}
.landing-nav-links a{padding:8px 12px;border-radius:9px;font-size:13px;color:var(--muted)}
.landing-nav-github{display:inline-flex;align-items:center;gap:7px}
.landing-nav-github .icon{width:15px;height:15px}
.landing-nav-links a:hover{background:var(--bg-a1);color:var(--text)}
.landing-nav .theme-toggle .icon{width:15px;height:15px}
.landing-hero{max-width:700px;margin:0 auto;text-align:center;padding:56px 0 30px}
.landing-hero .badge{margin-bottom:20px}
.landing-hero h1{font-size:clamp(34px,5vw,54px);line-height:1.03;font-weight:600;letter-spacing:-.045em;margin:0 0 18px}
.landing-hero>p{font-size:clamp(15px,1.5vw,18px);line-height:1.55;color:var(--muted);max-width:46ch;margin:0 auto}
.landing-cta{display:flex;gap:12px;justify-content:center;margin:24px 0 14px;flex-wrap:wrap}
.landing-cta .button{font-size:13px;min-height:42px;padding:0 18px}
.landing-stats{font-size:12px;color:var(--fg-2)}

/* Bento: explicit columns so every card lands where it belongs */
.landing-showcase{width:100vw;margin-left:calc(50% - 50vw);margin-top:30px;margin-bottom:60px;padding:0 clamp(16px,3vw,32px)}
.showcase-wall{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-items:start;-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 360px),rgba(0,0,0,.4) calc(100% - 170px),transparent 100%);mask-image:linear-gradient(to bottom,#000 calc(100% - 360px),rgba(0,0,0,.4) calc(100% - 170px),transparent 100%)}
.showcase-col{display:flex;flex-direction:column;gap:12px;min-width:0}
.showcase-item{min-width:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card);box-shadow:var(--shadow-soft)}
.showcase-item .specimen-body{min-height:0;align-items:stretch;justify-content:flex-start;padding:18px;gap:14px}
/* Loading state: cards hold their height and shimmer until the component mounts */
.showcase-item:empty{min-height:var(--min-h,150px);padding:18px;display:flex;flex-direction:column;justify-content:center;gap:12px}
.showcase-item:empty::before,.showcase-item:empty::after{content:'';border-radius:6px;background:linear-gradient(90deg,var(--bg-3) 25%,var(--bg-2) 50%,var(--bg-3) 75%);background-size:200% 100%;animation:syntari-skeleton 1.5s linear infinite}
.showcase-item:empty::before{height:16px}
.showcase-item:empty::after{height:10px;width:62%}
@keyframes syntari-skeleton{from{background-position:200% 0}to{background-position:-200% 0}}
.table-filters{display:grid;gap:10px;padding:18px 18px 0}
.table-filters .row{flex-wrap:wrap;gap:6px}
.project-card{padding:18px}
.project-card h3{font-size:15px;margin-top:14px}
.project-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.project-stats>div{display:grid;gap:4px}
.project-stats span{font-size:11px;color:var(--muted)}
.project-stats strong{font-size:19px;font-weight:600;letter-spacing:-.02em}

.landing-footer{display:grid;grid-template-columns:minmax(0,1fr);gap:0;border-top:1px solid var(--border);margin:56px calc(var(--gutter) * -1) 0;padding:44px var(--gutter) 0;overflow:hidden}
.landing-footer-top{display:grid;gap:34px}
.landing-footer-brand{display:grid;gap:10px;max-width:330px}
.landing-footer-brand .brand-mark{width:30px;height:30px;background:var(--text)}
.landing-footer-brand strong{font-size:17px;font-weight:500;letter-spacing:-.3px}
.landing-footer-brand p{font-size:13px;line-height:1.65;color:var(--muted)}
.landing-footer-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:26px}
.landing-footer-links h2{font-size:11px;font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.landing-footer-links a{display:block;padding:6px 0;font-size:13px;color:var(--text)}
.landing-footer-links a:hover{color:var(--accent-text)}
.landing-footer-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:44px;padding-top:20px;border-top:1px solid var(--border);font-size:11px;color:var(--muted)}
.landing-footer-status{display:flex;align-items:center;gap:8px}
.landing-wordmark{display:block;width:100%;height:auto;margin-top:14px;color:var(--text);opacity:.07;font-family:var(--font-logo);font-weight:600;user-select:none;pointer-events:none}
.landing-wordmark text{fill:currentColor;font-family:var(--font-logo);font-size:200px;font-weight:600;letter-spacing:-9px}
@media(min-width:880px){.landing-footer-top{grid-template-columns:minmax(230px,1fr) minmax(0,2.1fr)}}
@media(max-width:1300px){.showcase-wall{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:980px){.showcase-wall{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.showcase-wall{grid-template-columns:1fr}.landing-nav{flex-wrap:wrap;row-gap:6px}.landing-nav-links{flex-wrap:wrap;flex:1 1 100%;justify-content:space-between;order:2}.landing-nav-links a{padding:8px 9px;font-size:12px}.landing-hero{padding-top:40px}}