/* ELL. page kit: shared components of design/ell-prototype-v3.html for public pages (home, catalog, services).
   Scoped to .ek; no inline styles (CSP). Tokens and tile colours live in ell.css. */
.ek{position:relative;color:var(--t);container:ek/inline-size;font-size:16px;line-height:1.55}
.pro-shell .ek a{color:inherit;text-decoration:none}
.ek h1,.ek h2,.ek h3,.ek h4{margin:0;letter-spacing:-.03em;line-height:1.08;overflow-wrap:break-word}
.ek p{margin:0;color:inherit}
.ek .muted{color:var(--m)}
.ek svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.ek .tile{width:52px;height:52px;border-radius:16px}
.ek .tile.sm{width:30px;height:30px;border-radius:10px}
.ek .tile.xs{width:24px;height:24px;border-radius:8px}
.ek .tile.md{width:42px;height:42px;border-radius:13px}
.ek .tile.lg{width:64px;height:64px;border-radius:20px}
.ek [data-svc=f1]{--g1:#a855f7;--g2:#ec4899}.ek [data-svc=f2]{--g1:#6366f1;--g2:#8b5cf6}

.ek .btn,.pro-shell .ek a.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:14px;padding:13px 20px;font-weight:700;background:var(--b);color:#fff;font-size:15px;line-height:1.2;white-space:nowrap;box-shadow:0 12px 26px -12px var(--b);transition:transform .25s var(--spring),filter .2s;cursor:pointer}
.ek .btn:hover{transform:translateY(-1px);filter:brightness(1.06)}
.ek .btn:active{transform:scale(.97)}
.ek .btn svg{width:18px;height:18px}
.pro-shell .ek .btn.ghost{background:var(--glass);color:var(--t);box-shadow:none;border:1px solid var(--l);backdrop-filter:blur(10px)}
.pro-shell .ek .btn.soft{background:var(--bs);color:var(--bt);box-shadow:none}
.ek .btn.xl{padding:17px 26px;font-size:16px;border-radius:16px}
.ek .btn.sm{padding:9px 14px;font-size:13.5px;border-radius:12px}
.ek .chip,.pro-shell .ek button.chip{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;padding:7px 12px;border-radius:999px;background:var(--glass);border:1px solid var(--l);color:var(--m);white-space:nowrap;backdrop-filter:blur(10px);box-shadow:none;transition:color .2s,background .2s,transform .25s var(--spring)}
.ek .chip:hover{color:var(--t);background:var(--s)}
.ek .chip:active{transform:scale(.96)}
.pro-shell .ek .chip.sel,.pro-shell .ek .chip[aria-current=page],.pro-shell .ek .chip.active{background:var(--t)!important;color:var(--bg);border-color:var(--t)}
.ek .chip .d{width:7px;height:7px;border-radius:50%;background:var(--ok)}
.ek .chip.st-w .d{background:var(--w)}.ek .chip.st-b .d{background:var(--b)}
.ek .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--bt);background:var(--glass);border:1px solid var(--l);padding:6px 12px 6px 6px;border-radius:999px;backdrop-filter:blur(10px);max-width:100%}
.ek .eyebrow i{font-style:normal;background:var(--b);color:#fff;border-radius:999px;padding:2px 8px;font-size:11px;flex:none}
.ek .eyebrow span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ek .grad{background:linear-gradient(100deg,var(--b) 10%,#c45cff 55%,#ff6fa3);-webkit-background-clip:text;background-clip:text;color:transparent}
.ek .glass{background:var(--glass);border:1px solid var(--glassB);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);box-shadow:var(--sh)}
.ek .card{background:var(--s);border:1px solid var(--l);border-radius:var(--r);box-shadow:var(--sh)}
.ek .row{display:flex;align-items:center;gap:14px}
.ek .tag{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px;background:var(--s2);color:var(--m);white-space:nowrap}
.ek .tag.ok{background:color-mix(in srgb,var(--ok) 14%,transparent);color:var(--ok)}
.ek .tag.w{background:color-mix(in srgb,var(--w) 16%,transparent);color:#c27803}
:root:not([data-theme=light]) .ek .tag.w{color:#fbbf24}
.ek .tag.b{background:var(--bs);color:var(--bt)}
.ek .tg{font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:999px;color:#fff;white-space:nowrap}
.ek .tg.t{background:#2aabee}.ek .tg.x{background:#6b57ff}

.ek .aur{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none}
.ek .aur i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;animation:ek-drift 16s ease-in-out infinite alternate;will-change:transform}
.ek .aur i:nth-child(1){width:520px;height:520px;background:#8b7bff;left:-120px;top:-160px}
.ek .aur i:nth-child(2){width:460px;height:460px;background:#ff8fc8;right:-80px;top:-120px;animation-delay:-5s;opacity:.4}
.ek .aur i:nth-child(3){width:420px;height:420px;background:#5ad1ff;left:38%;top:180px;animation-delay:-9s;opacity:.35}
:root:not([data-theme=light]) .ek .aur i{opacity:.3}
@keyframes ek-drift{to{transform:translate(60px,40px) scale(1.12)}}
@keyframes ek-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes ek-pin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.ek .sec{padding:88px 52px 0}
.ek .sh{max-width:720px;margin-bottom:40px}
.ek .sh h2{font-size:clamp(28px,4.4cqi,44px);font-weight:800}
.ek .sh h2.sm{font-size:32px}
.ek .sh p{font-size:18px;color:var(--m);margin-top:14px}
.ek .center{text-align:center;margin-left:auto;margin-right:auto}
.ek .crumb{font-size:14px;color:var(--m);display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.pro-shell .ek .crumb a{color:var(--m)}.pro-shell .ek .crumb a:hover{color:var(--t)}
.ek .band{margin:96px 52px 0;border-radius:36px;padding:64px;position:relative;overflow:hidden;color:#fff;background:linear-gradient(120deg,#5b45ff,#9b4dff 55%,#ff5fa2)}
.ek .band:before{content:"";position:absolute;inset:0;background:radial-gradient(600px 300px at 80% 0%,rgba(255,255,255,.28),transparent 60%)}
.ek .band>*{position:relative}
.ek .band h2{font-size:clamp(28px,5cqi,52px);font-weight:900;max-width:680px}
.ek .band p{font-size:18px;color:#fff;opacity:.9;margin-top:16px;max-width:540px}
.pro-shell .ek .band .btn{background:#fff;color:#5b45ff;margin-top:30px;box-shadow:0 20px 40px -18px rgba(0,0,0,.5)}
.ek .band small{display:block;margin-top:14px;font-size:13px;opacity:.8}
.ek .seg{display:inline-flex;flex-wrap:nowrap;background:var(--s2);border-radius:14px;padding:4px;font-size:14px;font-weight:700;gap:2px;max-width:100%;overflow-x:auto;scrollbar-width:none}
.ek .seg::-webkit-scrollbar{display:none}
.pro-shell .ek .seg button{border:0;background:transparent;padding:8px 14px;border-radius:10px;color:var(--m);white-space:nowrap;box-shadow:none;transform:none;font-size:14px;font-weight:700;min-height:0;transition:background .3s,color .3s,box-shadow .3s}
.pro-shell .ek .seg button:is(.on,.active,[aria-selected=true]){background:var(--s)!important;color:var(--t);box-shadow:var(--sh)}
.pro-shell .ek .seg button:hover{background:color-mix(in srgb,var(--s) 60%,transparent)}

/* reveal on scroll (ui/kit.js adds .rv below the fold) */
.ek .rv{opacity:0;transform:translateY(26px) scale(.985);transition:opacity .7s var(--ease),transform .9s var(--spring)}
.ek .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.ek .aur i{animation:none}.ek .rv{opacity:1;transform:none;transition:none}}

/* site footer (all public pages) */
.foot{margin-top:96px;padding:34px 0 8px;border-top:1px solid var(--l);display:grid;grid-template-columns:1.4fr repeat(2,1fr);gap:28px;color:var(--m);font-size:14px}
.foot .ell-logo b,.foot .ell-dot{font-size:22px}
.foot p{margin:12px 0 0;max-width:300px;color:var(--m)}
.foot h4{color:var(--t);font-size:14px;margin:0 0 10px;letter-spacing:0}
.pro-shell .foot a{display:block;padding:3px 0;color:var(--m);text-decoration:none}
.pro-shell .foot a:hover{color:var(--t)}
.foot .cp{grid-column:1/-1;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;padding-top:20px;border-top:1px solid var(--l);font-size:13px}
.ek>.foot{padding:34px 52px 40px}
@media (max-width:1100px),(max-width:1366px) and (hover:none) and (pointer:coarse){.foot{grid-template-columns:1fr 1fr;gap:20px;margin-top:64px}.foot>div:first-child{grid-column:1/-1}.ek>.foot{padding:26px 20px 30px}}

/* catalog (prototype v3 «Сервисы») */
@media (min-width:1101px){.public-shell .ell-cat{margin:-28px -40px 0 -20px}}
@media (min-width:1101px) and (max-width:1250px){.public-shell .ell-cat{margin-right:-28px}}
.ell-cat .phead{position:relative;padding:56px 52px 8px}
.ell-cat .phead>*:not(.aur){position:relative;z-index:1}
.ell-cat .phead>.aur{opacity:.7;-webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}
.ell-cat .catalog-heading{display:block;margin:0}
.ell-cat .catalog-heading h1{font-size:clamp(30px,5.4cqi,52px);font-weight:900;letter-spacing:-.045em;margin:14px 0 0}
.ell-cat .phead .lead{font-size:18px;color:var(--m);margin-top:12px;max-width:620px}
.ell-cat .ctool{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:28px}
.ell-cat .ctool+.ctool{margin-top:14px}
.ell-cat .cats{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px}
.ell-cat .cats::-webkit-scrollbar{display:none}
.ell-cat .field-s{display:flex;align-items:center;gap:10px;padding:0 14px;height:46px;border-radius:14px;background:var(--s);border:1px solid var(--l);margin-left:auto;min-width:260px;color:var(--m)}
.ell-cat .field-s:focus-within{border-color:var(--b)}
.ell-cat .field-s svg{width:18px;height:18px;flex:none}
.pro-shell .ell-cat .field-s input{border:0;background:transparent;outline:0;flex:1;font-size:15px;min-width:0;margin:0;padding:0;border-radius:0;box-shadow:none;color:var(--t)}
.ell-cat #catalog-count{font-size:14px}
.ell-cat .sgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:20px;padding:26px 52px 0}
.ell-cat .scard{border-radius:26px;padding:22px;position:relative;overflow:hidden;transition:transform .35s var(--spring),box-shadow .3s;display:flex;flex-direction:column;min-height:250px;isolation:isolate}
.ell-cat .scard[hidden]{display:none}
.ell-cat .scard:hover{transform:translateY(-6px);box-shadow:var(--shL)}
.ell-cat .scard:active{transform:scale(.98)}
.ell-cat .scard .glow{position:absolute;width:200px;height:200px;border-radius:50%;filter:blur(55px);opacity:.2;right:-60px;top:-60px;background:var(--g1);z-index:0}
.ell-cat .scard>*:not(.glow){position:relative;z-index:1}
.ell-cat .scard .top{display:flex;justify-content:space-between;align-items:flex-start}
.ell-cat .scard h2{font-size:21px;margin-top:20px;letter-spacing:-.02em}
.ell-cat .scard p{color:var(--m);font-size:14.5px;margin-top:8px;line-height:1.5}
.ell-cat .scard .ft{margin-top:auto;padding-top:18px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.ell-cat .go i{font-style:normal;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--t);color:var(--bg);transition:transform .35s var(--spring)}
.ell-cat .scard:hover .go i{transform:translateX(3px)}
.ell-cat .scard .card-link{position:absolute;inset:0;z-index:2;border-radius:inherit}
.ell-cat .scard .card-link:focus-visible{outline:3px solid var(--b);outline-offset:3px}
.pro-shell .ell-cat .fav{position:relative;z-index:3;width:38px;height:38px;min-height:0;padding:0;border-radius:12px;border:1px solid var(--l);background:var(--glass);display:grid;place-items:center;color:var(--m);box-shadow:none;transition:transform .3s var(--spring),color .2s}
.pro-shell .ell-cat .fav:hover{transform:none;color:var(--t)}
.pro-shell .ell-cat .fav:active{transform:scale(.85)}
.ell-cat .fav svg{width:18px;height:18px;stroke-linejoin:round}
.pro-shell .ell-cat .fav[aria-pressed=true]{color:#f59e0b}.ell-cat .fav[aria-pressed=true] svg{fill:#f59e0b;stroke:#f59e0b}
.ell-cat .empty{text-align:center;padding:60px 20px;color:var(--m);border:0;background:none}
.ell-cat .empty h2{color:var(--t);font-size:22px;margin-bottom:8px}
.ell-cat .empty .btn{margin-top:16px}
.ell-cat .cat-note{padding-top:40px}
.ell-cat .cat-note .card{padding:26px;border-radius:26px;display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.ell-cat .cat-note .card>div{flex:1;min-width:220px}
.ell-cat .cat-note b{font-size:17px}.ell-cat .cat-note p{font-size:14.5px;margin-top:4px}
.ell-cat.in-cabinet .phead{padding:8px 0}.ell-cat.in-cabinet .phead>.aur,.ell-cat.in-cabinet .crumb{display:none}.ell-cat.in-cabinet .sgrid{padding:26px 0 0}
@container ek (max-width:600px){.ell-cat .field-s{margin-left:0;min-width:0;width:100%;order:-1}}
@media (max-width:1100px),(max-width:1366px) and (hover:none) and (pointer:coarse){.public-shell:has(.mobile-catalog) .foot{display:none}.ell-cat .sgrid{padding:20px 0 0;gap:14px}.ell-cat .scard{min-height:0;padding:18px;border-radius:22px}.ell-cat .scard h2{font-size:19px;margin-top:14px}.ell-cat .ctool{margin-top:20px}}

/* shared page head and FAQ (plans, help, services) */
.ek .phead{position:relative;padding:56px 52px 8px}
.ek .phead>*:not(.aur){position:relative;z-index:1}
.ek .phead>.aur{opacity:.7;-webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}
.ek .phead h1{font-size:clamp(30px,5.4cqi,52px);font-weight:900;letter-spacing:-.045em;margin-top:16px}
.ek .phead .lead{font-size:18px;color:var(--m);margin-top:12px;max-width:620px}
.ek .phead.center{text-align:center}.ek .phead.center .lead{margin-left:auto;margin-right:auto}
.ek .eyebrow:not(:has(i)){padding-left:12px}
.ek .faq2{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px}
.ek .faq2 h2{font-size:clamp(28px,4.4cqi,44px);font-weight:800}
.ek .faq2 .muted{margin-top:14px;font-size:17px}
.pro-shell .ek .faq2 .muted a{color:var(--bt);text-decoration:underline}
.ek details.q{border-bottom:1px solid var(--l);padding:20px 0}
.ek details.q summary{font-size:18px;font-weight:700;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;align-items:center}
.ek details.q summary::-webkit-details-marker{display:none}
.ek details.q summary:after{content:"+";width:32px;height:32px;border-radius:50%;background:var(--s2);display:grid;place-items:center;flex:none;font-weight:600;color:var(--bt);transition:transform .35s var(--spring)}
.ek details.q[open] summary:after{content:"–";background:var(--b);color:#fff;transform:rotate(180deg)}
.ek details.q p{color:var(--m);margin-top:12px;max-width:640px;animation:ek-pin .35s var(--ease)}
@container ek (max-width:1000px){.ek .faq2{grid-template-columns:1fr;gap:26px}}
@media (min-width:1101px){.public-shell main>.ek:not(.ell-home):not(.ell-cat):not(.svc3){margin:-28px -40px 0 -20px}}
@media (max-width:1100px),(max-width:1366px) and (hover:none) and (pointer:coarse){.ek .phead{padding:8px 0}.ek .phead>.aur{left:-24px;right:-24px;top:-40px}.ek .sec{padding:64px 0 0}.ek .band{margin:64px 0 0;padding:34px 24px;border-radius:30px}.ek .band .btn{width:100%;white-space:normal;text-align:center}}

.nf .phead{padding-top:96px;padding-bottom:40px}.nf .nf-a{margin-top:30px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ---------- fluid adaptation: sizes follow the content width continuously; switches that remain animate like the prototype frame (.45s spring) ---------- */
.ek .sec{padding:clamp(56px,7.5cqi,88px) clamp(20px,4.4cqi,52px) 0}
.ek .phead{padding:clamp(24px,4.8cqi,56px) clamp(20px,4.4cqi,52px) 8px}
.ek .band{margin:clamp(56px,8cqi,96px) clamp(0px,4.4cqi,52px) 0;padding:clamp(30px,5.4cqi,64px);border-radius:clamp(26px,3cqi,36px)}
.ek .sh{margin-bottom:clamp(24px,3.4cqi,40px)}
.ek .sh p{font-size:clamp(16px,1.6cqi,18px)}
.ell-cat .sgrid{padding:clamp(18px,2.2cqi,26px) clamp(0px,4.4cqi,52px) 0;gap:clamp(14px,1.7cqi,20px)}
.ek>.foot{padding:34px clamp(20px,4.4cqi,52px) 40px}
@media (prefers-reduced-motion:no-preference){
 .ek :is(.sec,.phead,.band,.sgrid,.try,.bento,.tl3,.feats,.soon,.pplan,.single,.h-stats,.h-hero,.sp-hero,.stack,.vwrap,.faq2,.htop,.rel):not(.rv){transition:padding .45s var(--spring),margin .45s var(--spring),gap .45s var(--spring),max-width .45s var(--spring),height .45s var(--spring),border-radius .45s var(--spring)}
 .ek :is(h1,h2,.lead):not(.rv){transition:font-size .45s var(--spring),margin .45s var(--spring)}
}
@media (max-width:1100px),(max-width:1366px) and (hover:none) and (pointer:coarse){.ek .phead{padding:8px 0}.ek .sec{padding:clamp(48px,9cqi,64px) 0 0}.ek .band{margin:clamp(48px,9cqi,64px) 0 0}.ell-cat .sgrid{padding:20px 0 0}.ek>.foot{padding:26px 20px 30px}}