/* кейсы на главной */
.kases{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
@media(max-width:900px){.kases{grid-template-columns:minmax(0,1fr)}}
.kase{--x:50%;--y:50%;position:relative;overflow:hidden;background:#000;padding:36px 34px 32px;display:flex;flex-direction:column;gap:16px;min-height:520px;background-image:linear-gradient(180deg,rgba(91,140,255,.06),transparent 55%)}
.kase::before{content:"";position:absolute;inset:0;background:radial-gradient(460px circle at var(--x) var(--y),rgba(37,99,255,.14),transparent 60%);opacity:0;transition:opacity .3s;pointer-events:none}
.kase:hover::before{opacity:1}
.kase .mono{color:var(--muted)}
.kase h3{font-size:clamp(34px,3.4vw,52px);line-height:1.02;margin-top:10px}
.kase>p{color:#C8CFDA;font-size:16.5px;max-width:520px}
.kf{list-style:none;margin:10px 0 0;padding:0;border-top:1px solid var(--line)}
.kf li{display:grid;grid-template-columns:150px minmax(0,1fr);gap:18px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--line)}
.kf b{font-weight:200;font-size:clamp(28px,2.4vw,36px);letter-spacing:-.03em;line-height:1;color:var(--text)}
.kf span{color:var(--muted);font-size:14.5px}
.kase .more{margin-top:auto;padding-top:18px;font:500 13px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--blue-hi);display:inline-flex;gap:10px}
.kase .ar{transition:transform .25s var(--ease)}
.kase:hover .more .ar{transform:translateX(4px)}
.kase::after{content:"";position:absolute;left:0;top:0;height:2px;width:0;background:var(--blue);box-shadow:0 0 12px var(--blue);transition:width 1.2s var(--ease) .2s}
.kase.in::after{width:100%}

/* как мы работаем */
#approach{background:radial-gradient(900px 480px at 100% 100%,rgba(37,99,255,.08),transparent 70%)}
.appr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
@media(max-width:1000px){.appr{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.appr{grid-template-columns:minmax(0,1fr)}}
.appr article{background:#000;padding:28px 26px 30px;display:flex;flex-direction:column;gap:12px;min-height:250px;background-image:linear-gradient(180deg,rgba(91,140,255,.05),transparent 55%)}
.appr .mono{color:var(--blue-hi)}
.appr h3{font-size:25px}
.appr p{color:var(--muted);font-size:15px}

/* страницы кейсов */
.chero{position:relative;overflow:hidden;border-bottom:1px solid var(--line);padding-block:clamp(56px,8vw,112px) clamp(96px,9vw,140px);background:radial-gradient(1000px 520px at 85% 110%,rgba(37,99,255,.20),transparent 65%),#000}
.chero .arcbg{position:absolute;left:50%;bottom:-40px;transform:translateX(-50%);width:170%;max-width:2400px;height:200px;pointer-events:none}
.chero .arcbg path{fill:none;stroke:url(#arcGrad);stroke-width:1.4;filter:drop-shadow(0 0 12px rgba(37,99,255,.8))}
.chero h1{font-size:clamp(46px,7vw,112px);line-height:.95;font-weight:200;margin-top:22px}
.chero .sub{margin-top:24px;font-size:clamp(17px,1.4vw,20px);color:#C8CFDA;max-width:720px}
.chips{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.chips span{font:400 11.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#B7BFCB;border:1px solid var(--line2);padding:6px 10px;background:rgba(0,0,0,.82)}
.chips .pill{border-color:rgba(0,207,244,.45)}
.crumbs{color:var(--dim)}.crumbs a{color:var(--muted)}.crumbs a:hover{color:var(--text)}
.c2{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4vw,64px);align-items:start}
@media(max-width:900px){.c2{grid-template-columns:minmax(0,1fr)}}
.c2 h2{font-size:clamp(34px,4vw,60px);line-height:1}
.prose{display:flex;flex-direction:column;gap:16px;color:#C8CFDA;font-size:17px;max-width:720px}
.prose b{color:var(--text);font-weight:500}
.prose ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.prose li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:8px}
.prose li::before{content:"—";color:var(--blue-hi)}
.journey{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);counter-reset:j}
@media(max-width:1000px){.journey{grid-template-columns:minmax(0,1fr)}}
.journey div{background:#000;padding:24px 22px;display:flex;flex-direction:column;gap:8px;counter-increment:j}
.journey div::before{content:counter(j,decimal-leading-zero);font:400 12px var(--mono);color:var(--blue-hi)}
.journey b{font-weight:400;font-size:19px}
.journey span{color:var(--muted);font-size:14.5px}

/* схема архитектуры слоями — HTML, а не картинка: читается и масштабируется на телефоне */
.arch{border:1px solid var(--line2);background:#03050A;padding:clamp(16px,2.4vw,28px);display:flex;flex-direction:column;gap:6px;box-shadow:0 40px 120px -50px rgba(37,99,255,.5)}
.layer{display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px;align-items:center}
@media(max-width:700px){.layer{grid-template-columns:minmax(0,1fr);gap:8px}}
.layer>.mono{color:var(--dim);font-size:11.5px}
.boxes{display:flex;flex-wrap:wrap;gap:8px}
.boxes span{border:1px solid var(--line2);background:#000;padding:10px 12px;font-size:13.5px;line-height:1.3;color:#DDE3EC;flex:1 1 140px;min-width:0}
.boxes span small{display:block;color:var(--muted);font-size:11.5px;margin-top:3px}
.boxes .hot{border-color:var(--cyan);box-shadow:0 0 24px rgba(0,207,244,.18)}
.boxes .bl{border-color:var(--blue)}
.boxes .plan{border-style:dashed;border-color:rgba(255,138,0,.6)}
.arrow{height:16px;margin-left:166px;background:linear-gradient(90deg,transparent calc(50% - .5px),var(--blue-hi) calc(50% - .5px),var(--blue-hi) calc(50% + .5px),transparent calc(50% + .5px));-webkit-mask:linear-gradient(#000,transparent);mask:linear-gradient(#000,transparent)}
@media(max-width:700px){.arrow{margin-left:0}}
.legend{display:flex;gap:18px;flex-wrap:wrap;font:400 11.5px var(--mono);color:var(--dim);text-transform:uppercase;letter-spacing:.06em;margin-top:10px}
.legend i{display:inline-block;width:14px;height:10px;border:1px solid var(--blue);vertical-align:-1px;margin-right:6px}
.legend i.p{border:1px dashed var(--orange)}.legend i.h{border-color:var(--cyan)}

.nums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
@media(max-width:1000px){.nums{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.nums{grid-template-columns:minmax(0,1fr)}}
.nums div{background:#000;padding:26px 24px;display:flex;flex-direction:column;gap:8px;min-height:190px}
.nums b{font-weight:200;font-size:clamp(38px,3.6vw,56px);letter-spacing:-.04em;line-height:1}
.nums span{color:var(--muted);font-size:14px}
.nums small{color:var(--dim);font:400 11px var(--mono);letter-spacing:.04em;text-transform:uppercase;margin-top:auto}

.dec{border-top:1px solid var(--line)}
.dec>div{display:grid;grid-template-columns:70px minmax(0,4fr) minmax(0,6fr);gap:24px;padding:26px 0;border-bottom:1px solid var(--line)}
@media(max-width:800px){.dec>div{grid-template-columns:44px minmax(0,1fr)}.dec>div p{grid-column:2}}
.dec .mono{color:var(--blue-hi);padding-top:6px}
.dec h3{font-size:clamp(21px,1.8vw,26px)}
.dec p{color:var(--muted);font-size:15.5px}

.tl{display:flex;flex-direction:column;border-left:1px solid var(--line2);margin-left:6px}
.tl>div{position:relative;padding:0 0 26px 28px}
.tl>div::before{content:"";position:absolute;left:-5px;top:6px;width:9px;height:9px;background:#000;border:1px solid var(--blue-hi)}
.tl .mono{color:var(--blue-hi)}
.tl b{display:block;font-weight:400;font-size:18px;margin:4px 0 2px}
.tl span:last-child{color:var(--muted);font-size:15px}

.status{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media(max-width:800px){.status{grid-template-columns:minmax(0,1fr)}}
.box{border:1px solid var(--line2);background:var(--panel);padding:28px 28px 30px}
.box h3{font-size:24px;margin-bottom:14px}
.box ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;color:var(--muted);font-size:15px}
.box li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:8px}
.box.ready li::before{content:"✓";color:var(--cyan);font:400 12px var(--mono);padding-top:3px}
.box.next li::before{content:"→";color:var(--orange)}

.nextcase{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;border-bottom:0}
.nextcase a.big{font-weight:200;font-size:clamp(32px,4vw,64px);letter-spacing:-.03em;line-height:1}
.nextcase a.big:hover{color:var(--blue-hi)}

/* задачи без названий проектов */
.tasks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
@media(max-width:1100px){.tasks{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:680px){.tasks{grid-template-columns:minmax(0,1fr)}}
.task{--x:50%;--y:50%;position:relative;overflow:hidden;background:#000;padding:30px 28px 26px;display:flex;flex-direction:column;gap:12px;background-image:linear-gradient(180deg,rgba(91,140,255,.05),transparent 55%)}
.task::before{content:"";position:absolute;inset:0;background:radial-gradient(400px circle at var(--x) var(--y),rgba(37,99,255,.14),transparent 60%);opacity:0;transition:opacity .3s;pointer-events:none}
.task:hover::before{opacity:1}
.task .mono{color:var(--blue-hi)}
.task h3{font-size:clamp(23px,1.9vw,28px);line-height:1.12}
.task>p{color:var(--muted);font-size:15px}
.task .kf{margin-top:auto;padding-top:0}
.task .kf li{grid-template-columns:118px minmax(0,1fr);gap:14px;padding:12px 0}
.task .kf b{font-size:clamp(24px,2vw,30px)}
.task .kf span{font-size:13.5px}

/* ссылки на заметки на главной */
.nlink{display:block;background:#000}
.nlink article{height:100%}
.nlink:hover h3{color:var(--blue-hi)}
.nlink h3{transition:color .2s}