/* ============================================================
   Pricing page (/uslugi)
   ============================================================ */
.pricing{ padding:150px 0 110px; }
@media (max-width:760px){ .pricing{ padding:116px 0 76px; } }
.pricing-head{ max-width:62ch; margin:0 auto 34px; text-align:center; }
.pricing-head .lead{ margin:16px auto 0; }

/* segmented toggle with a sliding pill */
.price-toggle{
  position:relative; display:flex; width:fit-content; margin:0 auto 40px; padding:4px;
  border-radius:999px; border:1px solid var(--border); background:rgba(255,255,255,0.03);
  backdrop-filter:blur(6px);
}
.price-toggle button{
  position:relative; z-index:1; border:0; background:none; padding:9px 22px; border-radius:999px;
  font-size:0.92rem; font-weight:600; color:var(--text-dim);
  transition:color .35s var(--ease-liquid);
}
.price-toggle button[aria-selected="true"]{ color:var(--accent-ink); }
.price-toggle button:focus-visible{ outline:2px solid var(--accent-2); outline-offset:2px; }
.price-toggle-pill{
  position:absolute; z-index:0; top:4px; bottom:4px; left:0; width:0; border-radius:999px;
  background:linear-gradient(180deg, var(--accent-2), var(--accent));
  box-shadow:0 6px 18px -8px rgba(147,144,151,0.6), inset 0 1px 0 rgba(255,255,255,0.35);
  transition:transform .5s var(--ease-spring), width .5s var(--ease-spring);
}

/* cards */
.price-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; max-width:1080px; margin:0 auto; }
.price-grid[hidden]{ display:none; }
.price-grid.is-entering .price-card{ animation:price-in .55s var(--ease-liquid) both; }
.price-grid.is-entering .price-card:nth-child(2){ animation-delay:.06s; }
.price-grid.is-entering .price-card:nth-child(3){ animation-delay:.12s; }
@keyframes price-in{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
@media (max-width:900px){ .price-grid{ grid-template-columns:1fr; max-width:520px; } }

.price-card{
  position:relative; display:flex; flex-direction:column;
  border-radius:var(--radius-l); border:1px solid var(--border-strong);
  background:var(--surface); box-shadow:0 24px 50px -26px rgba(0,0,0,0.7);
}

/* featured: a light trail running around the border */
@property --trail{ syntax:"<angle>"; inherits:false; initial-value:0deg; }
.price-card.is-featured{
  border-color:transparent;
  background:
    linear-gradient(var(--surface-2), var(--surface-2)) padding-box,
    conic-gradient(from var(--trail), var(--border-strong) 0deg, var(--border-strong) 250deg,
      rgba(255,255,255,0.95) 300deg, var(--border-strong) 340deg) border-box;
  animation:price-trail 5s linear infinite;
  box-shadow:0 30px 70px -30px rgba(147,144,151,0.35), 0 24px 50px -26px rgba(0,0,0,0.7);
}
@keyframes price-trail{ to{ --trail:360deg; } }
@media (prefers-reduced-motion:reduce){ .price-card.is-featured{ animation:none; } }

.price-badge{
  position:absolute; top:0; left:50%; transform:translate(-50%, -50%); z-index:2;
  display:inline-flex; align-items:center; gap:5px; white-space:nowrap;
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.05em; text-transform:uppercase;
  padding:5px 10px; border-radius:999px; border:1px solid var(--accent-line); color:var(--accent-2);
  background:var(--surface-3);
}
.price-badge svg{ width:11px; height:11px; }

.price-card-head{
  padding:24px 24px 22px; border-bottom:1px solid var(--border);
  border-radius:var(--radius-l) var(--radius-l) 0 0; background:rgba(255,255,255,0.015);
}
.price-card.is-featured .price-card-head{ background:rgba(255,255,255,0.03); }
.price-card-head h3{ font-size:1.3rem; }
.price-card-info{ margin-top:6px; font-size:0.88rem; color:var(--text-dim); }
.price-card-price{ margin-top:18px; display:flex; align-items:baseline; flex-wrap:wrap; gap:6px; }
.price-from{ font-family:var(--font-mono); font-size:0.8rem; color:var(--text-faint); }
.price-value{ font-family:var(--font-display); font-weight:700; font-size:2.1rem; letter-spacing:-0.02em; line-height:1; }
.price-unit{ font-size:0.86rem; color:var(--text-faint); }

.price-card-features{ display:grid; gap:13px; padding:22px 24px 26px; font-size:0.9rem; color:var(--text-dim); }
.price-card-features li{ display:flex; align-items:flex-start; gap:10px; line-height:1.45; }
.price-check{ width:17px; height:17px; flex:0 0 auto; margin-top:1px; color:var(--accent-2); }

/* tooltip */
.price-tip{ position:relative; cursor:help; border-bottom:1px dashed var(--accent-line); outline:none; }
.price-tip::after{
  content:attr(data-tip); position:absolute; left:0; bottom:calc(100% + 10px); z-index:20;
  width:max-content; max-width:260px; padding:9px 12px; border-radius:var(--radius-s);
  background:var(--surface-3); border:1px solid var(--border-strong); color:var(--text);
  font-size:0.8rem; line-height:1.45; box-shadow:0 14px 30px -12px rgba(0,0,0,0.8);
  opacity:0; transform:translateY(4px); pointer-events:none;
  transition:opacity .2s var(--ease-liquid), transform .2s var(--ease-liquid);
}
.price-tip:hover::after, .price-tip:focus-visible::after, .price-tip:focus::after{ opacity:1; transform:none; }
.price-tip:focus-visible{ color:var(--text); }

.price-card-foot{ margin-top:auto; padding:16px 18px 18px; border-top:1px solid var(--border); }
.price-card-foot .btn{ width:100%; }

/* secondary row: MVP, support, terms */
.price-extra{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; max-width:1080px; margin:44px auto 0;
}
@media (max-width:900px){ .price-extra{ grid-template-columns:1fr; max-width:520px; } }
.price-extra-item{
  padding:22px 24px; border-radius:var(--radius-m); border:1px solid var(--border);
  background:rgba(255,255,255,0.02);
}
.price-extra-label{
  display:block; font-family:var(--font-mono); font-size:10px; letter-spacing:0.09em; text-transform:uppercase;
  color:var(--accent-2); margin-bottom:10px;
}
.price-extra-item h3{ font-size:1.08rem; margin-bottom:8px; }
.price-extra-item p{ font-size:0.88rem; color:var(--text-dim); line-height:1.55; }
.price-extra-item a{ color:var(--text); border-bottom:1px solid var(--accent-line); }
.price-extra-price{ margin-top:14px; font-family:var(--font-display); font-weight:700; font-size:1.35rem; color:var(--text) !important; }
.price-extra-price span{ font-family:var(--font-body); font-weight:500; font-size:0.86rem; color:var(--text-faint); }
.price-terms{ display:grid; gap:8px; font-size:0.88rem; color:var(--text-dim); }
.price-terms li{ padding-left:16px; position:relative; }
.price-terms li::before{ content:"—"; position:absolute; left:0; color:var(--accent-2); }

.nav-links a[aria-current="page"]{ color:var(--text); }