/* SWD Services layers — four panels (website, plugins, apps, hosting) with live mini demos. */
.swd.swd-layers { padding: clamp(90px, 11vw, 170px) 0 0; }
.swd-layers .layers__head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 48px; align-items: end; margin-bottom: 56px; }
.swd-layers .layers__head h2 { font-size: clamp(38px, 5vw, 72px); }
.swd-layers .layers__head p { font-size: 19px; color: var(--muted); max-width: 30em; }
.swd-layers .lp { display: flex; gap: 14px; height: 560px; }
.swd-layers .lp__p { position: relative; flex: 0 0 108px; display: flex; border-radius: 32px; background: var(--card); box-shadow: inset 0 0 0 1px var(--edge); overflow: hidden; transition: flex-basis .6s cubic-bezier(.65, 0, .35, 1), background .4s; }
.swd-layers .lp__p::before { content: ""; position: absolute; inset: 0; background: radial-gradient(600px 400px at 85% 100%, color-mix(in srgb, var(--c) 22%, transparent), transparent 70%); opacity: 0; transition: opacity .6s; pointer-events: none; }
.swd-layers .lp__p.is-open { flex: 1 1 auto; }
.swd-layers .lp__p.is-open::before { opacity: 1; }
.swd-layers .lp__p:not(.is-open):hover { background: var(--card-2); }
.swd-layers .lp__tab { all: unset; box-sizing: border-box; position: relative; z-index: 2; flex: 0 0 108px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 30px 0; cursor: pointer; color: #fff; }
.swd-layers .lp__tab:hover, .swd-layers .lp__tab:focus { background: none; color: #fff; }
.swd-layers .lp__tab:focus-visible { outline: 2px solid var(--c); outline-offset: -6px; border-radius: 30px; }
.swd-layers .lp__ico { width: 52px; height: 52px; border-radius: 14px; background: color-mix(in srgb, var(--c) 18%, transparent); display: grid; place-items: center; font-style: normal; transition: background .4s; }
.swd-layers .lp__ico svg { width: 24px; height: 24px; fill: none; stroke: var(--c); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: stroke .4s; }
.swd-layers .lp__p.is-open .lp__ico { background: var(--c); }
.swd-layers .lp__p.is-open .lp__ico svg { stroke: var(--ink); }
.swd-layers .lp__name { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 30px; font-weight: 500; letter-spacing: -.03em; white-space: nowrap; }
.swd-layers .lp__p.is-open .lp__name { color: var(--c); }
.swd-layers .lp__body { position: relative; z-index: 1; flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 32px; padding: 40px 40px 40px 8px; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
.swd-layers .lp__p.is-open .lp__body { opacity: 1; visibility: visible; transition: opacity .5s .3s, visibility 0s .3s; }
.swd-layers .lp__text { display: flex; flex-direction: column; min-width: 260px; }
.swd-layers .lp__text h3 { font-size: clamp(28px, 2.5vw, 38px); letter-spacing: -.04em; }
.swd-layers .lp__text p { margin-top: 16px; font-size: 17px; color: var(--muted); }
.swd-layers .lp__text ul { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 12px; }
.swd-layers .lp__text li { position: relative; padding-left: 28px; font-size: 16.5px; }
.swd-layers .lp__text li::before { content: ""; position: absolute; left: 2px; top: .42em; width: 11px; height: 6px; border-left: 2px solid var(--c); border-bottom: 2px solid var(--c); transform: rotate(-45deg); }
.swd-layers .lp__more { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding-top: 24px; font-size: 17px; font-weight: 500; color: var(--c); text-decoration: none; }
.swd-layers .lp__more svg { width: 15px; height: 15px; transition: transform .2s; }
.swd-layers .lp__more:hover svg { transform: translate(2px, -2px); }
.swd-layers .lp__demo { position: relative; min-width: 260px; display: grid; place-items: center; }

/* demo: website */
.swd-layers .dw__win { width: 100%; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6); }
.swd-layers .dw__bar { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; background: #EEF1F6; font-size: 12px; color: #55607A; }
.swd-layers .dw__bar i { width: 8px; height: 8px; border-radius: 50%; background: #CCD3DE; }
.swd-layers .dw__bar span { margin: 0 auto; }
.swd-layers .dw__shot { aspect-ratio: 16 / 10; background: var(--img) top center / cover no-repeat; transition: opacity .5s; }
.swd-layers .dw__shot.is-fade { opacity: 0; }
/* demo: plugins */
.swd-layers .dp__win { width: 100%; max-width: 380px; border-radius: 16px; background: #0F1528; box-shadow: inset 0 0 0 1px var(--edge), 0 30px 60px -20px rgba(0, 0, 0, .6); padding: 18px; }
.swd-layers .dp__h { display: flex; justify-content: space-between; align-items: baseline; font-size: 15px; font-weight: 500; margin-bottom: 10px; }
.swd-layers .dp__h em { font-style: normal; font-size: 13px; color: #7CF0C0; }
.swd-layers .dp__row { display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--edge); font-size: 15px; }
.swd-layers .dp__row i { width: 34px; height: 34px; border-radius: 9px; background: var(--k); color: var(--ink); font-style: normal; font-weight: 600; display: grid; place-items: center; }
.swd-layers .dp__row b { font-weight: 500; }
.swd-layers .dp__sw { width: 40px; height: 22px; border-radius: 22px; background: #2E3757; position: relative; transition: background .3s; }
.swd-layers .dp__sw::after { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .3s; }
.swd-layers .dp__row.is-on .dp__sw { background: #3BE38F; }
.swd-layers .dp__row.is-on .dp__sw::after { transform: translateX(18px); }
/* demo: app */
.swd-layers .demo-app { min-height: 0; }
.swd-layers .da__ph { position: relative; z-index: 2; width: min(190px, 48%); aspect-ratio: 9 / 19.5; border-radius: 28px; border: 6px solid #0B1020; overflow: hidden; box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 40px 60px -25px rgba(0, 0, 0, .8); transform: rotate(-4deg); }
.swd-layers .da__ph img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: opacity .5s; }
.swd-layers .da__ph--back { position: absolute; z-index: 1; width: min(160px, 40%); transform: translate(70%, 6%) rotate(8deg); opacity: .75; }
/* demo: hosting */
.swd-layers .dh__win { width: 100%; max-width: 420px; border-radius: 16px; background: #0F1528; box-shadow: inset 0 0 0 1px var(--edge), 0 30px 60px -20px rgba(0, 0, 0, .6); padding: 20px; }
.swd-layers .dh__top { display: flex; justify-content: space-between; align-items: center; font-size: 15px; font-weight: 500; }
.swd-layers .dh__top > span { display: inline-flex; align-items: center; gap: 8px; }
.swd-layers .dh__top b { font-size: 26px; font-weight: 500; letter-spacing: -.04em; color: #3BE38F; }
.swd-layers .dh__bars { display: flex; gap: 3px; height: 44px; margin-top: 18px; }
.swd-layers .dh__bars i { flex: 1; border-radius: 2px; background: #3BE38F; opacity: .85; transform-origin: bottom; animation: swd-layers-barIn .5s both; }
.swd-layers .dh__bars i.lo { background: #FFD166; }
@keyframes swd-layers-barIn { from { transform: scaleY(0); } }
.swd-layers .dh__foot { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12px; color: var(--muted); }
.swd-layers .dh__log { margin-top: 16px; padding: 10px 12px; border-radius: 10px; background: rgba(255, 255, 255, .05); font: 13px/1.4 ui-monospace, Menlo, monospace; color: #C9D1E3; transition: opacity .3s; }
.swd-layers .dh__log span { color: var(--muted); margin-right: 6px; }

@media (max-width: 1180px) {
	.swd-layers .lp__body { grid-template-columns: minmax(0, 1fr); }
	.swd-layers .lp__demo { display: none; }
}
@media (max-width: 980px) {
	.swd-layers .layers__head { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-bottom: 36px; }
	.swd-layers .lp { flex-direction: column; height: auto; }
	.swd-layers .lp__p { flex: 0 0 auto; display: grid; grid-template-rows: auto 0fr; border-radius: 24px; scroll-margin-top: 84px; transition: grid-template-rows .5s cubic-bezier(.4, 0, .2, 1), background .4s; }
	.swd-layers .lp__p.is-open { grid-template-rows: auto 1fr; }
	.swd-layers .lp__tab { flex: 0 0 auto; flex-direction: row; justify-content: flex-start; gap: 16px; padding: 18px 20px; }
	.swd-layers .lp__tab::after { content: "+"; margin-left: auto; font-size: 26px; color: var(--muted); transition: transform .3s; }
	.swd-layers .lp__p.is-open .lp__tab::after { transform: rotate(45deg); color: var(--c); }
	.swd-layers .lp__ico { width: 44px; height: 44px; }
	.swd-layers .lp__name { writing-mode: horizontal-tb; transform: none; font-size: 24px; }
	.swd-layers .lp__body { display: grid; min-height: 0; overflow: hidden; padding: 0 20px; grid-template-columns: minmax(0, 1fr); visibility: visible; opacity: 0; transform: translateY(-8px); transition: padding .5s cubic-bezier(.4, 0, .2, 1), opacity .25s, transform .4s; }
	.swd-layers .lp__p.is-open .lp__body { padding-bottom: 24px; opacity: 1; transform: none; transition: padding .5s cubic-bezier(.4, 0, .2, 1), opacity .4s .15s, transform .5s .1s; }
	.swd-layers .lp__text { min-width: 0; }
	.swd-layers .lp__demo { display: grid; min-width: 0; margin-top: 8px; }
	.swd-layers .lp__text h3 { font-size: 26px; }
}