/* ink.grandma.click /services — стилі сторінки послуг. Простір grandma.agency. */

.nav a.is-current{color:#fff}.nav a.is-current::after{transform:scaleX(1)}

/* ---------- hero: roller ---------- */
.hero--svc .hero__drips{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:.55}
.hero--svc .hero__title{font-size:clamp(56px,8.8vw,140px)}
:lang(uk) .hero--svc .hero__title{font-size:clamp(48px,7.4vw,118px)}
.hero__stroke{position:absolute;z-index:1;left:38%;top:56%;width:120vw;height:clamp(120px,18vh,220px);transform:translate(0,-50%) rotate(-11deg);transform-origin:0 50%;background:linear-gradient(90deg,var(--accent-deep),var(--accent) 40%,var(--accent-light) 70%,var(--accent));border-radius:14px 60px 40px 90px/60px 20px 80px 30px;filter:url(#wobble);opacity:0;clip-path:inset(0 100% 0 0 round 40px);pointer-events:none;box-shadow:0 30px 120px -30px rgba(233,30,150,.6)}
.hero__stroke.is-in{opacity:.92;clip-path:inset(0 0 0 0 round 40px);transition:clip-path 1.5s var(--ease-out) .25s,opacity .3s .25s}
.hero__stroke i{position:absolute;top:100%;width:14px;height:0;background:var(--accent);border-radius:0 0 10px 10px;transition:height 1.6s var(--ease-out)}
.hero__stroke i::after{content:"";position:absolute;left:50%;bottom:-6px;width:18px;height:18px;margin-left:-9px;border-radius:50%;background:var(--accent)}
.hero__stroke i:nth-child(1){left:12%}.hero__stroke i:nth-child(2){left:31%;width:10px}.hero__stroke i:nth-child(3){left:47%;width:18px}.hero__stroke i:nth-child(4){left:63%;width:8px}
.hero__stroke.is-in i:nth-child(1){height:70px;transition-delay:1.2s}.hero__stroke.is-in i:nth-child(2){height:120px;transition-delay:1.5s}.hero__stroke.is-in i:nth-child(3){height:46px;transition-delay:1.3s}.hero__stroke.is-in i:nth-child(4){height:160px;transition-delay:1.8s}
.hero--svc .hero__note{left:auto;right:4%;top:10%;transform:rotate(6deg)}
.hero--svc .hero__img{right:2%}
@media(max-width:900px){.hero__stroke{left:-10%;top:45%;height:90px}.hero--svc .hero__note{right:2%;top:4%}}

/* ---------- value points ---------- */
.vp{padding:30px 0 20px;border-top:1px solid var(--line)}
.vp__list{list-style:none;margin:0 auto;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.vp__item{position:relative;padding:26px 26px 26px 64px;border:1px solid var(--line);border-radius:22px;background:var(--surface);overflow:hidden;isolation:isolate}
.vp__item::before{content:"";position:absolute;left:-40px;top:-40px;width:150px;height:150px;border-radius:52% 48% 61% 39%/45% 56% 44% 55%;background:radial-gradient(circle at 40% 40%,rgba(233,30,150,.55),transparent 70%);filter:blur(18px);z-index:-1;transition:transform .8s var(--ease-out)}
.vp__item:hover::before{transform:scale(1.6) translate(20px,20px)}
.vp__n{position:absolute;left:24px;top:28px;font-family:var(--mono);font-size:11px;letter-spacing:.3em;color:var(--accent)}
.vp__t{font-family:var(--display);font-size:clamp(26px,2.4vw,36px);line-height:.95;text-transform:uppercase;margin:0 0 10px;font-weight:400}
.vp__item p{margin:0;color:var(--muted);font-size:14px;line-height:1.55}
@media(max-width:900px){.vp__list{grid-template-columns:1fr}}

/* ---------- palette ---------- */
.pal{padding:140px 0 100px;position:relative;overflow:hidden}
.pal__sub{max-width:56ch;color:rgba(245,245,245,.72);margin:-24px 0 48px;font-size:15px}
.pal__grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:40px;align-items:start}
.pal__qs{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.pal__q{position:relative;width:100%;text-align:left;display:flex;align-items:center;gap:18px;padding:18px 22px;border:1px solid var(--line);border-radius:18px;background:var(--surface);color:var(--text);font-family:var(--ui);font-weight:500;font-size:clamp(15px,1.25vw,18px);cursor:pointer;overflow:hidden;isolation:isolate;transition:border-color .35s,transform .5s var(--ease-out),color .3s}
.pal__q::before{content:"";position:absolute;left:0;top:50%;width:0;height:0;border-radius:50%;background:var(--accent);transform:translate(-30%,-50%);transition:width .6s var(--ease-out),height .6s var(--ease-out);z-index:-1}
.pal__q:hover{border-color:rgba(233,30,150,.5);transform:translateX(6px)}
.pal__q.is-on{border-color:var(--accent);color:#fff}
.pal__q.is-on::before{width:900px;height:900px}
.pal__qn{font-family:var(--mono);font-size:11px;letter-spacing:.3em;color:var(--accent);flex:none;transition:color .3s}
.pal__q.is-on .pal__qn{color:rgba(255,255,255,.8)}
.pal__stage{position:relative;min-height:560px}
.pal__dish{position:relative;width:min(100%,450px);aspect-ratio:1;margin:0 auto 0 0}
.pal__goo{position:absolute;inset:0;filter:url(#goo-big)}
.pal__b{position:absolute;left:50%;top:50%;width:var(--s,70px);height:var(--s,70px);margin:calc(var(--s,70px)/-2) 0 0 calc(var(--s,70px)/-2);border-radius:50%;background:var(--accent);will-change:transform;box-shadow:0 0 40px -8px rgba(233,30,150,.6)}
.pal__b.is-dim{background:var(--accent-deep)}
.pal__core{position:absolute;left:50%;top:50%;width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:46% 54% 51% 49%/55% 46% 54% 45%;background:var(--accent);transform:scale(0);animation:coreWob 7s ease-in-out infinite alternate}
@keyframes coreWob{to{border-radius:39% 61% 44% 56%/55% 45% 55% 45%}}
.pal__labels{position:absolute;inset:0;pointer-events:none}
.pal__l{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:var(--ui);font-weight:700;font-size:11px;letter-spacing:.06em;color:#090909;white-space:nowrap;transition:opacity .4s,color .4s}
.pal__l.is-dim,.pal__l.is-out{color:rgba(255,255,255,.7);font-size:11px;font-weight:600}
.pal__result{position:relative;z-index:2;margin:18px 0 0;width:min(100%,520px);min-height:150px;text-align:center}
.pal__idle{margin:0;font-size:clamp(20px,2vw,26px);transform:rotate(-2deg)}
.pal__mixt{font-family:var(--display);font-size:clamp(30px,3vw,46px);line-height:.95;text-transform:uppercase;margin:0 0 10px;font-weight:400}
.pal__mixt .ch{display:inline-block}
.pal__mixd{color:var(--muted);margin:0 auto 20px;max-width:44ch;font-size:15px}
.pal__mixa{display:flex;gap:16px;justify-content:center;align-items:center;flex-wrap:wrap}
.pal__reset{background:none;border:0;color:var(--muted);font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;padding:8px 0;border-bottom:1px solid transparent;transition:color .3s,border-color .3s}
.pal__reset:hover{color:#fff;border-color:var(--accent)}
.pal__gm{position:absolute;right:-22%;bottom:-6%;height:min(72%,580px);width:auto;max-width:none;z-index:1;pointer-events:none;filter:drop-shadow(0 30px 70px rgba(0,0,0,.65));opacity:.95}
@media(max-width:1200px){.pal__gm{right:-28%;height:60%}}
@media(max-width:900px){
  .pal{padding:100px 0 60px}
  .pal__grid{grid-template-columns:1fr;gap:28px}
  .pal__stage{min-height:auto;padding-bottom:0}
  .pal__dish{width:min(100%,360px)}
  .pal__gm{position:relative;right:auto;bottom:auto;height:auto;width:min(60%,300px);margin:10px auto -30px;display:block}
  .pal__result{min-height:auto}
}

/* ---------- index ---------- */
.idx{padding:120px 0 120px;position:relative;border-top:1px solid var(--line)}
.idx__list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.idx__row{position:relative;border-bottom:1px solid var(--line);isolation:isolate}
.idx__link{position:relative;z-index:2;display:grid;grid-template-columns:70px minmax(0,1.1fr) minmax(0,.9fr) 52px;gap:24px;align-items:center;padding:26px 8px;transition:color .4s}
.idx__n{font-family:var(--mono);font-size:12px;letter-spacing:.3em;color:var(--accent);transition:color .4s}
.idx__t{font-family:var(--display);font-size:clamp(34px,4.2vw,72px);line-height:.92;text-transform:uppercase;transition:transform .6s var(--ease-out)}
.idx__x{color:var(--muted);font-size:14px;line-height:1.5;max-width:40ch;transition:color .4s}
.idx__arrow{width:52px;height:52px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;font-size:20px;color:var(--muted);transition:background .35s,color .35s,transform .5s var(--ease),border-color .35s}
.idx__smear{position:absolute;inset:6px -12px;z-index:1;background:linear-gradient(90deg,var(--accent-deep),var(--accent) 45%,var(--accent-light));border-radius:22px 60px 30px 70px/50px 24px 70px 30px;transform:scaleX(0);transform-origin:left center;transition:transform .7s var(--ease-out);pointer-events:none}
@media(hover:hover){
  .idx__row:hover .idx__smear{transform:scaleX(1)}
  .idx__row:hover .idx__link{color:#090909}
  .idx__row:hover .idx__n,.idx__row:hover .idx__x{color:rgba(9,9,9,.75)}
  .idx__row:hover .idx__t{transform:translateX(14px)}
  .idx__row:hover .idx__arrow{background:#090909;color:#fff;border-color:#090909;transform:rotate(45deg)}
}
.idx__f{list-style:none;margin:0;padding:0 8px 22px 94px;display:none;gap:8px 20px;flex-wrap:wrap;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.idx__f li::before{content:"·";color:var(--accent);margin-right:8px}
.idx__peek{position:fixed;left:0;top:0;z-index:50;pointer-events:none;opacity:0;transform:translate(-9999px,-9999px);will-change:transform}
.idx__peek-in{transform:translate(28px,-50%) rotate(var(--rot,0deg));width:280px;padding:20px 22px;border-radius:18px;background:rgba(12,12,12,.9);border:1px solid rgba(233,30,150,.45);backdrop-filter:blur(14px);box-shadow:0 30px 80px -20px rgba(0,0,0,.8),0 0 60px -20px rgba(233,30,150,.5);transition:transform .6s var(--ease-out)}
.idx__peek-k{margin:0 0 12px;color:var(--accent)}
.idx__peek ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-family:var(--ui);font-size:14px;font-weight:500;color:#fff}
.idx__peek li{display:flex;gap:10px;align-items:baseline}
.idx__peek li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none;transform:translateY(-2px)}
@media(max-width:900px){
  .idx{padding:90px 0 80px}
  .idx__link{grid-template-columns:40px minmax(0,1fr) 44px;gap:12px;padding:20px 4px}
  .idx__n{grid-column:1;grid-row:1}
  .idx__t{grid-column:2;grid-row:1}
  .idx__x{grid-column:2;grid-row:2}
  .idx__arrow{grid-column:3;grid-row:1/3;width:44px;height:44px}
  .idx__f{display:flex;padding-left:56px}
  .idx__t{font-size:clamp(26px,7.5vw,44px);overflow-wrap:anywhere}
  .idx__peek{display:none}
}

/* ---------- rank ---------- */
.rank{position:relative;padding:130px 0 110px;background:var(--surface);overflow:hidden;border-top:1px solid var(--line)}
.rank__gm{position:absolute;right:-6%;top:-40px;height:min(56vh,560px);width:auto;max-width:none;opacity:.85;pointer-events:none;filter:drop-shadow(0 30px 60px rgba(0,0,0,.6));mask-image:linear-gradient(180deg,#000 55%,transparent);-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent);z-index:0}
.rank .wrap{position:relative;z-index:1}
.rank .sec-head__side{transform:none;max-width:38ch;font-family:var(--body);color:rgba(245,245,245,.72);font-size:15px}
.rank__crit{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 34px}
.rank__c{position:relative;height:46px;padding:0 20px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:transparent;color:var(--muted);font-family:var(--ui);font-weight:600;font-size:12px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;overflow:hidden;isolation:isolate;transition:color .3s,border-color .3s}
.rank__c::before{content:"";position:absolute;left:50%;top:50%;width:0;height:0;border-radius:50%;background:var(--accent);transform:translate(-50%,-50%);transition:width .5s var(--ease-out),height .5s var(--ease-out);z-index:-1}
.rank__c:hover{color:#fff;border-color:rgba(233,30,150,.6)}
.rank__c.is-on{color:#fff;border-color:var(--accent)}
.rank__c.is-on::before{width:360px;height:360px}
.rank__list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.rank__row{display:grid;grid-template-columns:34px 220px minmax(0,1fr) 64px 70px auto;gap:18px;align-items:center;padding:14px 18px;border:1px solid var(--line);border-radius:18px;background:var(--bg);will-change:transform;transition:border-color .4s}
.rank__row.is-top{border-color:rgba(233,30,150,.6);box-shadow:0 20px 60px -30px rgba(233,30,150,.6)}
.rank__pos{font-family:var(--mono);font-size:12px;letter-spacing:.2em;color:var(--accent)}
.rank__name{display:grid;gap:2px;min-width:0}
.rank__label{font-family:var(--display);font-size:clamp(22px,2vw,30px);line-height:1;text-transform:uppercase}
.rank__best{font-family:var(--hand);color:var(--accent-light);font-size:16px;line-height:1.1;opacity:.85}
.rank__bar{position:relative;height:18px;border-radius:999px;background:rgba(255,255,255,.06);overflow:visible}
.rank__fill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:999px;background:linear-gradient(90deg,var(--accent-deep),var(--accent) 60%,var(--accent-light));box-shadow:0 0 30px -6px rgba(233,30,150,.7)}
.rank__drip{position:absolute;right:2px;top:60%;width:8px;height:0;border-radius:0 0 8px 8px;background:var(--accent-light);transition:height .8s var(--ease-out) .5s}
.rank__row.is-top .rank__drip{height:22px}
.rank__score{font-family:var(--display);font-size:26px;line-height:1;text-align:right;font-variant-numeric:tabular-nums}
.rank__score small{font-size:12px;color:var(--dim);font-family:var(--mono);margin-left:3px}
.rank__budget{font-family:var(--mono);font-size:12px;letter-spacing:.2em;color:var(--muted)}
.rank__view{font-family:var(--ui);font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--muted);white-space:nowrap;transition:color .3s}
.rank__view:hover{color:var(--accent)}
.rank__top{display:inline-block;margin-left:8px;font-family:var(--hand);font-size:15px;color:var(--accent);transform:rotate(-3deg)}
.rank__legend{margin:26px 0 0;color:var(--dim)}
@media(max-width:1100px){.rank__gm{height:40vh;opacity:.5}}
@media(max-width:900px){
  .rank{padding:90px 0 70px}
  .rank__gm{display:none}
  .rank__row{grid-template-columns:28px 1fr 56px;grid-template-rows:auto auto auto;gap:6px 12px;padding:14px}
  .rank__pos{grid-row:1}.rank__name{grid-column:2;grid-row:1}
  .rank__score{grid-column:3;grid-row:1}
  .rank__bar{grid-column:1/4;grid-row:2;height:14px}
  .rank__budget{grid-column:1/3;grid-row:3;align-self:center}
  .rank__view{grid-column:2/4;grid-row:3;justify-self:end;font-size:10px}
}

/* ---------- stack ---------- */
.stk{padding:130px 0 80px;position:relative}
.stk .sec-head__side{transform:none;max-width:38ch;font-family:var(--body);color:rgba(245,245,245,.72);font-size:15px}
.stk__cards{display:grid;gap:24px;padding-bottom:10vh}
.stk__card{position:sticky;top:calc(96px + var(--i)*16px);min-height:min(66vh,620px);border:1px solid var(--line);border-radius:30px;background:var(--surface-2);padding:clamp(28px,4vw,56px);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);grid-template-rows:auto auto auto 1fr auto;column-gap:40px;overflow:hidden;isolation:isolate;will-change:transform;box-shadow:0 -20px 80px -40px rgba(0,0,0,.9)}
.stk__card:nth-child(even){background:#101010}
.stk__n{font-family:var(--mono);font-size:11px;letter-spacing:.3em;color:var(--accent);grid-column:1/3}
.stk__t{font-family:var(--display);font-size:clamp(56px,8vw,140px);line-height:.88;text-transform:uppercase;margin:14px 0 6px;font-weight:400;grid-column:1/3}
.stk__h{margin:0 0 18px;font-size:clamp(24px,2.4vw,34px);grid-column:1}
.stk__s{margin:0 0 20px;color:rgba(245,245,245,.78);max-width:46ch;font-size:15px;grid-column:1;align-self:start}
.stk__p{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:10px;grid-column:2;grid-row:3/5;align-self:start;font-family:var(--ui);font-size:15px;font-weight:500}
.stk__p li{display:flex;gap:12px;align-items:baseline;padding:10px 0;border-top:1px solid var(--line)}
.stk__p li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none;transform:translateY(-2px)}
.stk__card .btn{grid-column:1;justify-self:start;align-self:end}
.stk__blob{position:absolute;right:-10%;bottom:-30%;width:50%;aspect-ratio:1;border-radius:52% 48% 61% 39%/45% 56% 44% 55%;background:radial-gradient(circle at 40% 40%,rgba(233,30,150,.35),rgba(109,59,255,.1) 60%,transparent 75%);filter:blur(30px);animation:blob 9s ease-in-out infinite alternate;z-index:-1}
.stk__card:nth-child(odd) .stk__blob{background:radial-gradient(circle at 40% 40%,rgba(109,59,255,.3),rgba(233,30,150,.12) 60%,transparent 75%)}
@media(max-width:900px){
  .stk{padding:90px 0 40px}
  .stk__card{position:relative;top:auto;min-height:auto;grid-template-columns:1fr;grid-template-rows:auto;padding:26px}
  .stk__n,.stk__t,.stk__h,.stk__s,.stk__p,.stk__card .btn{grid-column:1;grid-row:auto}
  .stk__t{font-size:clamp(44px,12vw,72px)}
}

/* ---------- faq ---------- */
.faq{padding:130px 0 110px;border-top:1px solid var(--line)}
.faq__grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:60px;align-items:start}
.faq__head{position:sticky;top:110px}
.faq__sub{margin:22px 0 0;transform:rotate(-3deg);display:inline-block}
.faq__list{display:grid;gap:0;border-top:1px solid var(--line)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__q{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 4px;font-family:var(--ui);font-weight:600;font-size:clamp(17px,1.5vw,22px);line-height:1.3;transition:color .3s}
.faq__q::-webkit-details-marker{display:none}
.faq__q:hover{color:var(--accent-light)}
.faq__plus{position:relative;width:38px;height:38px;flex:none;border-radius:50%;border:1px solid var(--line);transition:background .4s,border-color .4s,transform .6s var(--ease-out),border-radius .6s var(--ease-out)}
.faq__plus::before,.faq__plus::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:2px;background:currentColor;transform:translate(-50%,-50%);transition:transform .5s var(--ease-out)}
.faq__plus::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq__item[open] .faq__plus{background:var(--accent);border-color:var(--accent);color:#fff;transform:rotate(135deg);border-radius:46% 54% 51% 49%/55% 46% 54% 45%}
.faq__a{overflow:hidden}
.faq__a p{margin:0 0 26px;color:rgba(245,245,245,.72);max-width:60ch;font-size:15px;line-height:1.65;padding-right:60px}
@media(max-width:900px){.faq{padding:90px 0 70px}.faq__grid{grid-template-columns:1fr;gap:30px}.faq__head{position:static}.faq__a p{padding-right:0}}

/* ---------- cta pour ---------- */
.cta--pour .cta__pour{right:2%;bottom:-2%;height:min(92%,780px);mask-image:linear-gradient(180deg,#000 82%,transparent);-webkit-mask-image:linear-gradient(180deg,#000 82%,transparent)}
.cta--pour .cta__side{max-width:420px}
@media(max-width:900px){.cta--pour .cta__pour{position:relative;right:auto;bottom:auto;height:auto;width:min(60%,300px);margin:0 auto -50px;mask-image:none;-webkit-mask-image:none}}

@media(prefers-reduced-motion:reduce){.hero__stroke{opacity:.92;clip-path:none}.hero__drips{display:none}.pal__core,.stk__blob{animation:none}}