/* LunaSound — сторінка прайсу. Підключається лише на /price/ (поверх style.css) */

/* шапка сторінки */
.phead{position:relative;overflow:hidden;padding:calc(72px + env(safe-area-inset-top,0px) + 64px) var(--pad) 56px;background:radial-gradient(ellipse at 82% 40%,#0b6074,transparent 62%),linear-gradient(135deg,#0f3542,#004e60)}
.phead::after{content:"";position:absolute;right:-6%;top:50%;width:min(760px,130vw);aspect-ratio:1;margin-top:calc(min(760px,130vw)/-2);border-radius:50%;pointer-events:none;background:repeating-radial-gradient(circle,transparent 0 22px,rgba(179,213,221,.16) 22px 23px);-webkit-mask:radial-gradient(circle,#000 22%,transparent 68%);mask:radial-gradient(circle,#000 22%,transparent 68%);animation:breathe 10s ease-in-out infinite alternate}
@keyframes breathe{from{transform:scale(.9) rotate(0)}to{transform:scale(1.08) rotate(8deg)}}
.phead>*{position:relative;z-index:1}
.phead h1{font-weight:200;font-size:clamp(52px,11vw,96px);line-height:1.3;background:linear-gradient(100deg,#fff 30%,#f9cf73 55%,#fff 80%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:up 1s var(--ease) .1s forwards,shine 9s linear 1.8s infinite}
.phead .sub{font-weight:200;font-size:clamp(20px,3.6vw,30px);color:#fff;margin-top:6px}
.phead .eyebrow{margin-bottom:12px}
.note{margin-top:32px;max-width:640px;padding:16px 20px;border-left:3px solid var(--gold);background:rgba(3,53,64,.55);border-radius:0 var(--r-s) var(--r-s) 0;font-size:15px;line-height:1.6;color:var(--ice2)}

/* картки послуг */
#rates{background:var(--bg2)}
.pg{display:grid;grid-template-columns:1fr;gap:28px;margin-top:44px}
.pg .card{flex:none;width:auto;min-height:0;display:flex;flex-direction:column;padding-inline:30px;padding-bottom:28px}
.pg .card p{font:300 15px/1.6 Manrope,sans-serif;color:var(--ice)}
.pg .card p+p{margin-top:8px}
.pr{margin-top:auto;padding-top:26px;display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;color:var(--ice2)}
.pr .fr{font-size:16px}
.pr .am{font:200 clamp(44px,5vw,56px)/1 Jost,sans-serif;color:var(--gold);letter-spacing:.02em}
.pr .un{font-size:15px}
.pr .am .cur{font-size:.5em;font-style:normal;vertical-align:top;position:relative;top:.14em;margin-right:.08em;letter-spacing:0}
.pr .am.rq{font-size:clamp(30px,3.4vw,38px);letter-spacing:.01em}
.pg .cu{background:radial-gradient(circle at 100% 0,rgba(249,207,115,.12),transparent 50%),linear-gradient(160deg,#0b6074,#06404f)}
.pg .cu .btn{align-self:flex-start;margin-top:auto;height:44px;padding:0 26px}
.pg .cu p{margin-bottom:22px}

/* що потрібно для розрахунку */
#need{background:var(--bg)}
#need h2{font:500 clamp(28px,5vw,40px)/1.2 Manrope,sans-serif;letter-spacing:.05em;color:var(--ice2);margin:20px 0 0}
#need .row b{flex:0 0 min(340px,38%)}
#need .row b i{font:200 28px Jost,sans-serif;font-style:normal;color:var(--gold);margin-right:16px}

/* форма внизу */
#ask{background:var(--bg2);padding-bottom:clamp(110px,12vw,150px)}
#ask h2{font:500 clamp(28px,5vw,40px)/1.2 Manrope,sans-serif;letter-spacing:.05em;color:var(--ice2);margin:20px 0 22px}

@media(min-width:640px){.pg{grid-template-columns:1fr 1fr}.pg .cu{grid-column:1/-1}}
@media(min-width:1000px){.pg{grid-template-columns:repeat(3,1fr)}.pg .cu{grid-column:span 2}}
@media(max-width:860px){
.phead{padding-top:calc(72px + env(safe-area-inset-top,0px) + 40px);padding-bottom:44px}
#need .row b{flex:none}
#need .row b i{font-size:24px;margin-right:12px}
}
@media(max-width:860px),(hover:none){.phead h1{animation:up 1s var(--ease) .1s forwards}}
@media(prefers-reduced-motion:reduce){.phead::after{transform:none}}
