.tpl-list{flex-direction:column;gap:clamp(56px,8vw,120px);margin-top:clamp(40px,5vw,72px);display:flex}.tpl{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);align-items:center;gap:clamp(32px,5vw,88px);display:grid}.tpl:nth-child(2n) .tpl__stage{order:2}.tpl__stage{color:inherit;padding:0 clamp(28px,4vw,64px) clamp(28px,3.5vw,48px) 0;text-decoration:none;display:block;position:relative}.tpl:nth-child(2n) .tpl__stage{padding:0 0 clamp(28px,3.5vw,48px) clamp(28px,4vw,64px)}.tpl__browser{background:var(--paper);border:1px solid var(--hair);transition:transform .5s var(--ease-out,cubic-bezier(.2,.7,.2,1)), box-shadow .5s;border-radius:14px;overflow:hidden;box-shadow:0 40px 80px -48px #3b29128c,0 2px 6px #3b29120f}.tpl__chrome{background:var(--linen);border-bottom:1px solid var(--hair);align-items:center;gap:6px;height:34px;padding:0 14px;display:flex}.tpl__chrome i{background:var(--champagne);border-radius:50%;width:9px;height:9px}.tpl__chrome span{background:var(--paper);max-width:260px;height:20px;color:var(--ink-faint);border-radius:6px;flex:1;margin-left:12px;padding-left:10px;font-size:11px;line-height:20px}.tpl__screen{aspect-ratio:16/10;background:var(--linen);position:relative;overflow:hidden}.tpl__screen img{width:100%;height:auto;transition:transform 6s cubic-bezier(.45,.05,.35,1);display:block;position:absolute;inset:0 0 auto;transform:translateY(0)}.tpl__phone{aspect-ratio:390/844;width:clamp(92px,17%,150px);transition:transform .5s var(--ease-out,cubic-bezier(.2,.7,.2,1));background:#111;border:5px solid #1b1612;border-radius:22px;position:absolute;bottom:0;right:0;overflow:hidden;box-shadow:0 30px 60px -28px #3b2912b3}.tpl:nth-child(2n) .tpl__phone{left:0;right:auto}.tpl__phone img{object-fit:cover;object-position:top;width:100%;height:100%;display:block}@media (hover:hover){.tpl__stage:hover .tpl__browser{transform:translateY(-6px);box-shadow:0 50px 90px -46px #3b291299,0 2px 6px #3b29120f}.tpl__stage:hover .tpl__screen img{transform:translateY(calc(-100% + var(--screen-h,0px)))}.tpl__stage:hover .tpl__phone{transform:translateY(-12px)rotate(-2deg)}}@media (prefers-reduced-motion:reduce){.tpl__screen img,.tpl__browser,.tpl__phone{transition:none}}.tpl__no{letter-spacing:.16em;text-transform:uppercase;color:var(--cocoa);opacity:.65;font-size:11px}.tpl__name{font-family:var(--display);letter-spacing:-.03em;color:var(--ink);margin:14px 0 18px;font-size:clamp(40px,4.6vw,72px);font-weight:700;line-height:1}.tpl__sum{color:var(--ink-soft);max-width:46ch;font-size:clamp(15px,1.1vw,17px);line-height:1.55}.tpl__feats{grid-template-columns:1fr 1fr;gap:10px 20px;margin:24px 0 0;padding:0;list-style:none;display:grid}.tpl__feats li{color:var(--ink);padding-left:18px;font-size:14px;line-height:1.4;position:relative}.tpl__feats li:before{content:"";background:var(--aqua,#a1d7d6);border-radius:50%;width:8px;height:8px;position:absolute;top:.45em;left:0}.tpl__meta{border-top:1px solid var(--hair);flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:26px;padding-top:20px;display:flex}.tpl__swatches{display:flex}.tpl__swatches i{border:2px solid var(--paper);width:26px;height:26px;box-shadow:0 0 0 1px var(--hair);border-radius:50%;margin-right:-6px}.tpl__fonts{letter-spacing:.06em;color:var(--ink-faint);font-size:12px}.tpl__acts{flex-wrap:wrap;gap:12px;margin-top:30px;display:flex}.tpl-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px);margin:clamp(36px,4vw,56px) 0 0;padding:0;list-style:none;display:grid}.tpl-steps li{background:var(--paper);border:1px solid var(--hair);border-radius:18px;padding:clamp(24px,2.6vw,36px)}.tpl-steps__n{letter-spacing:.16em;color:var(--cocoa);opacity:.6;font-size:12px}.tpl-steps h3{font-family:var(--display);letter-spacing:-.02em;color:var(--ink);margin:14px 0 10px;font-size:clamp(20px,1.6vw,24px);font-weight:700}.tpl-steps p{color:var(--ink-soft);margin:0;font-size:15px;line-height:1.55}@media (max-width:960px){.tpl{grid-template-columns:1fr}.tpl:nth-child(2n) .tpl__stage{order:0;padding:0 clamp(28px,4vw,64px) clamp(28px,3.5vw,48px) 0}.tpl:nth-child(2n) .tpl__phone{left:auto;right:0}.tpl-steps{grid-template-columns:1fr}}@media (max-width:560px){.tpl__feats{grid-template-columns:1fr}.tpl__acts .btn{flex:100%;justify-content:center}}
