/* /demos: fast, mobile-first portfolio page. */
.demos-page{background:var(--bg)}
.demos-hero{position:relative;isolation:isolate;min-height:82svh;display:flex;align-items:flex-end;max-width:var(--wrap);margin:auto;padding:126px 18px 66px;border-inline:1px solid rgba(255,255,255,.065);overflow:hidden}
.demos-hero:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(7,8,10,.22),rgba(7,8,10,.78) 58%,var(--bg)),linear-gradient(90deg,rgba(7,8,10,.92),rgba(7,8,10,.18) 72%)}
.demos-hero-art{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:center;opacity:.72}
.demos-hero-copy{width:min(100%,830px)}
.demos-hero .kicker{margin-bottom:18px}
.demos-hero h1{font-size:clamp(3.1rem,14vw,5rem);line-height:.9;letter-spacing:-.065em}
.demos-hero h1 span{display:block;color:var(--aqua);font-weight:400;-webkit-text-stroke:0}
.demos-intro{max-width:650px;margin:24px 0 0;color:#e2e4e7;font-size:clamp(1rem,2vw,1.18rem);line-height:1.68}
.demos-proof{display:flex;flex-wrap:wrap;gap:9px;margin-top:28px}
.demos-proof span{display:inline-flex;align-items:center;min-height:34px;padding:0 12px;border:1px solid rgba(255,255,255,.18);border-radius:99px;background:rgba(7,8,10,.46);font:500 9px var(--mono);letter-spacing:.11em;color:#e1e3e6;backdrop-filter:blur(8px)}
.demos-proof span:first-child{border-color:rgba(165,234,219,.36);color:var(--aqua)}
.demos-list{padding-top:70px}
.demos-head{margin-bottom:34px}
.demos-head .eyebrow{display:block;margin-bottom:14px;color:var(--aqua)}
.demos-head h2{max-width:760px;margin:0;font-size:clamp(2.35rem,9vw,4.6rem);font-weight:300;line-height:.96;letter-spacing:-.055em}
.demos-head p{max-width:610px;margin:20px 0 0;color:var(--muted)}
.demos-grid{display:grid;grid-template-columns:1fr;gap:16px}
.demos-card{position:relative;display:flex;flex-direction:column;min-width:0;border-radius:24px;overflow:hidden;background:linear-gradient(150deg,rgba(255,255,255,.075),rgba(255,255,255,.022));border:1px solid var(--line);box-shadow:0 30px 70px rgba(0,0,0,.24);transition:border-color .25s,box-shadow .25s,transform .25s}
.demos-card:hover{border-color:rgba(165,234,219,.42);box-shadow:0 36px 90px rgba(0,0,0,.38)}
.demos-poster{position:relative;aspect-ratio:3/2;overflow:hidden;background:#111318;border-bottom:1px solid var(--line)}
.demos-poster:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 58%,rgba(7,8,10,.42))}
.demos-poster img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .7s cubic-bezier(.22,1,.36,1)}
.demos-card:hover .demos-poster img{transform:scale(1.018)}
.demos-card-body{display:flex;flex:1;flex-direction:column;padding:22px}
.demos-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.demos-card-label{font:500 9px/1.5 var(--mono);letter-spacing:.13em;color:var(--aqua)}
.demos-card.real .demos-card-label{color:var(--gold)}
.demos-index{font:300 28px/1 var(--mono);color:rgba(255,255,255,.22)}
.demos-card h3{margin:28px 0 12px;font-size:clamp(1.65rem,7vw,2.45rem);font-weight:400;line-height:1.05;letter-spacing:-.045em}
.demos-card p{margin:0;color:var(--muted);font-size:14px;line-height:1.7}
.demos-link{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:50px;margin-top:26px;padding-top:16px;border-top:1px solid var(--line);color:var(--aqua);font:500 11px var(--mono);letter-spacing:.08em;text-decoration:none}
.demos-link span:last-child{font-size:18px;transition:transform .2s}
.demos-link:hover span:last-child{transform:translate(3px,-3px)}
.demos-card.real .demos-link{color:var(--gold)}
.demos-honesty{display:flex;gap:12px;align-items:flex-start;margin:22px 0 0;padding:18px;border:1px solid rgba(255,255,255,.12);border-radius:16px;color:#c6c9ce;font:400 10px/1.7 var(--mono)}
.demos-honesty i{flex:none;width:7px;height:7px;margin-top:5px;border-radius:50%;background:var(--aqua);box-shadow:0 0 15px rgba(165,234,219,.62)}
.demos-cta{padding-top:42px}
.demos-cta-shell{position:relative;display:grid;gap:28px;padding:30px 22px;border-radius:26px;overflow:hidden;background:linear-gradient(135deg,rgba(165,234,219,.11),rgba(255,255,255,.025) 64%)}
.demos-cta-shell:after{content:"";position:absolute;width:260px;height:260px;right:-110px;bottom:-170px;border-radius:50%;background:rgba(165,234,219,.2);filter:blur(80px);pointer-events:none}
.demos-cta h2{position:relative;z-index:1;max-width:730px;margin:14px 0 0;font-size:clamp(2.35rem,9vw,4.5rem);font-weight:300;line-height:.98;letter-spacing:-.055em}
.demos-cta p{position:relative;z-index:1;max-width:580px;margin:16px 0 0;color:var(--muted)}
.demos-cta-action{position:relative;z-index:1;align-self:end}
.demos-cta-action .preview-cta{width:100%}
.demos-page footer{margin-top:32px}
@media(min-width:760px){
  .demos-hero{padding:150px 36px 82px}.demos-hero h1{font-size:clamp(4.8rem,8.2vw,7.7rem)}
  .demos-list{padding-top:96px}.demos-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .demos-card-body{padding:28px}.demos-card:first-child{grid-column:1/-1;display:grid;grid-template-columns:1.2fr .8fr}.demos-card:first-child .demos-poster{aspect-ratio:auto;min-height:430px;border-bottom:0;border-right:1px solid var(--line)}
  .demos-card:last-child{grid-column:1/-1;display:grid;grid-template-columns:.9fr 1.1fr}.demos-card:last-child .demos-poster{aspect-ratio:auto;min-height:390px;border-bottom:0;border-right:1px solid var(--line)}
  .demos-card:nth-child(4){grid-column:1/-1}
  .demos-cta-shell{grid-template-columns:1fr auto;align-items:end;padding:48px}.demos-cta-action .preview-cta{width:310px}
}
@media(min-width:1120px){.demos-grid{gap:20px;grid-template-columns:repeat(3,minmax(0,1fr))}.demos-card:nth-child(4){grid-column:auto}.demos-card-body{padding:32px}.demos-card p{font-size:15px}.demos-list{padding-bottom:118px}}
@media(max-width:620px){
  .demos-page .nav{width:calc(100% - 18px)}.demos-page .brand{font-size:11px}.demos-page .lang{min-height:44px}
  .demos-hero{min-height:76svh;padding-top:104px}.demos-hero:after{background:linear-gradient(180deg,rgba(7,8,10,.2),rgba(7,8,10,.84) 52%,var(--bg))}
  .demos-list{padding-block:66px}.demos-card-body{padding:20px}.demos-card h3{margin-top:24px}.demos-card p{font-size:14px}
  .demos-honesty{font-size:9px}.demos-cta{padding-top:26px}.demos-page footer{margin-top:14px}
}
@media(prefers-reduced-motion:reduce){.demos-poster img,.demos-link span:last-child,.demos-card{transition:none!important}.demos-card:hover .demos-poster img{transform:none!important}}