/* homepage demo showcase (blog 1, every language) */
#demos.twd{position:relative;width:100vw;margin-left:calc(50% - 50vw);background:#0b0b0c;color:#f2efe9;padding:clamp(80px,10vw,150px) 0 clamp(70px,9vw,130px);overflow:hidden;isolation:isolate;scroll-margin-top:70px}
#demos.twd::before{content:"";position:absolute;inset:-30% -10% auto auto;width:70vw;height:70vw;max-width:1100px;max-height:1100px;background:radial-gradient(closest-side,rgba(255,85,19,.22),transparent 70%);z-index:-1;pointer-events:none}
#demos .twd-in{max-width:none}
#demos .twd-head{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:20px 60px;align-items:end;padding:0 clamp(20px,5vw,90px);margin-bottom:clamp(36px,5vw,64px)}
#demos .twd-k{grid-column:1/-1;margin:0;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:#ff7a45;font-weight:700}
#demos h2{margin:0;color:#fff;font-size:clamp(40px,6.4vw,104px);line-height:.98;letter-spacing:-.03em;font-weight:700;text-transform:none}
#demos h2 em{font-style:normal;color:#ff5513}
#demos .twd-s{margin:0;color:#b9b4ab;font-size:clamp(16px,1.3vw,19px);line-height:1.6;max-width:560px}
#demos .twd-nav{grid-column:1/-1;display:flex;align-items:center;gap:10px;margin-top:8px}
#demos .twd-all{display:inline-flex;align-items:center;gap:10px;height:54px;padding:0 26px;border-radius:999px;background:#ff5513;color:#fff;font-weight:600;font-size:16px;text-decoration:none;transition:transform .3s,background .3s}
#demos .twd-all:hover{transform:translateY(-2px);background:#ff6a30}
#demos .twd-arr{margin-inline-start:auto;width:54px;height:54px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:transparent;color:#fff;font-size:28px;line-height:1;cursor:pointer;transition:background .25s,border-color .25s}
#demos .twd-arr + .twd-arr{margin-inline-start:0}
#demos .twd-arr:hover{background:rgba(255,255,255,.1);border-color:#fff}
#demos .twd-row{display:flex;gap:clamp(16px,1.8vw,28px);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:clamp(20px,5vw,90px);padding:6px clamp(20px,5vw,90px) 24px;scrollbar-width:none;outline:0;cursor:grab}
#demos .twd-row::-webkit-scrollbar{display:none}
#demos .twd-row.drag{cursor:grabbing;scroll-snap-type:none}
#demos .twd-card{flex:0 0 clamp(290px,32vw,470px);scroll-snap-align:start;display:flex;flex-direction:column;border-radius:28px;overflow:hidden;background:var(--c);box-shadow:0 30px 70px -40px rgba(0,0,0,.9);
	opacity:0;transform:translateY(50px) rotate(1.5deg);transition:opacity .9s cubic-bezier(.2,.7,.1,1) calc(var(--i)*.09s),transform 1s cubic-bezier(.2,.7,.1,1) calc(var(--i)*.09s)}
#demos.in .twd-card{opacity:1;transform:none}
#demos .twd-img{position:relative;display:block;aspect-ratio:4/3;overflow:hidden}
#demos .twd-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.4s cubic-bezier(.2,.7,.1,1)}
#demos .twd-img::after{content:"";position:absolute;inset:auto 0 0 0;height:45%;background:linear-gradient(transparent,var(--c))}
#demos .twd-card:hover .twd-img img{transform:scale(1.08)}
#demos .twd-txt{display:flex;flex-direction:column;gap:10px;padding:4px clamp(22px,2.2vw,32px) clamp(24px,2.4vw,34px);flex:1;color:#fff}
#demos .twd-tag{align-self:flex-start;font-size:12px;padding:6px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.3);color:rgba(255,255,255,.85)}
#demos h3{margin:4px 0 0;font-size:clamp(40px,4vw,62px);line-height:.9;letter-spacing:-.02em;font-weight:800}
#demos h3 a{color:#fff;text-decoration:none}
#demos .twd-kind{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.75)}
#demos .twd-txt p{margin:0;color:rgba(255,255,255,.82);font-size:16px;line-height:1.55;padding:0}
#demos .twd-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:12px}
#demos .twd-b{display:inline-flex;align-items:center;height:46px;padding:0 20px;border-radius:999px;background:#fff;color:#111;font-weight:600;font-size:15px;text-decoration:none;transition:transform .3s}
#demos .twd-b:hover{transform:translateX(4px)}
#demos .twd-b.o{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.45)}
#demos .twd-b.o:hover{background:rgba(255,255,255,.1)}
[dir=rtl] #demos .twd-b:hover{transform:translateX(-4px)}
@media (max-width:860px){#demos .twd-head{grid-template-columns:1fr}#demos .twd-arr{display:none}#demos .twd-card{flex-basis:84vw}}
@media (prefers-reduced-motion:reduce){#demos .twd-card{opacity:1;transform:none;transition:none}}