/* ==========================================================================
   Pages: Hero, Services, Tariffs, Calculator, Dashboard, Payment, etc.
   ========================================================================== */

/* --------------------------------------------------------------------------
   HERO — главная
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  background: linear-gradient(180deg, var(--c-ink) 0%, var(--c-graphite-900) 100%);
  color: var(--c-white);
  overflow: hidden;
  padding-top: calc(var(--header-h) + var(--s-12));
  padding-bottom: var(--s-20);
}

@media (min-width: 1024px) {
  .hero {
    padding-top: calc(var(--header-h) + var(--s-20));
    padding-bottom: var(--s-32);
  }
}

.hero::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 70%; height: 100%;
  background:
    radial-gradient(circle at 70% 30%, hsl(48 100% 50% / 0.18), transparent 50%),
    radial-gradient(circle at 90% 80%, hsl(48 100% 50% / 0.10), transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-12);
  align-items: center;
}

@media (min-width: 1024px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: var(--s-16);
  }
}

.hero__content {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
  max-width: 640px;
}

.hero__headline {
  font-size: var(--fs-display-1);
  line-height: 1.05;
  font-weight: var(--fw-extrabold);
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.hero__headline em {
  font-style: normal;
  background: linear-gradient(135deg, var(--c-amber-500), var(--c-amber-300));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---- Hero: динамическое появление слов ---- */
.hero__headline .hero__word,
.hero__content > .hero__lead,
.hero__content > .hero__actions {
  display: inline-block;
}
.hero__word {
  opacity: 0;
  transform: translateY(0.5em);
  filter: blur(6px);
  animation: heroWordIn 0.7s cubic-bezier(.2,.8,.2,1) forwards;
  animation-delay: calc(var(--i, 0) * 90ms + 120ms);
  margin-right: 0.25em;
}
.hero__word--accent {
  margin-right: 0;
}
.hero__lead,
.hero__actions {
  opacity: 0;
  transform: translateY(12px);
  animation: heroLineIn 0.7s cubic-bezier(.2,.8,.2,1) forwards;
  animation-delay: calc(var(--i, 6) * 90ms + 120ms);
}
@keyframes heroWordIn {
  to { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes heroLineIn {
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__word, .hero__lead, .hero__actions {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

.hero__lead {
  font-size: var(--fs-body-lg);
  line-height: 1.5;
  color: var(--c-graphite-400);
  max-width: 56ch;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-2);
}

.hero__trust {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-4);
  margin-top: var(--s-8);
  padding-top: var(--s-6);
  border-top: 1px solid var(--c-graphite-700);
}

@media (min-width: 768px) {
  .hero__trust { grid-template-columns: repeat(4, 1fr); }
}

.hero__trust-item {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

.hero__trust-value {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
  color: var(--c-white);
  font-feature-settings: 'tnum';
}

.hero__trust-label {
  font-size: var(--fs-caption);
  color: var(--c-graphite-500);
}

/* Hero visual: signal graphics */
.hero__visual {
  position: relative;
  aspect-ratio: 1 / 1;
  max-width: 560px;
  width: 100%;
  margin-inline: auto;
}

@media (max-width: 1023px) {
  .hero__visual { max-width: 320px; opacity: 0.85; }
}
@media (max-width: 639px) {
  .hero__visual { display: none; }
  .hero { padding-top: calc(var(--header-h) + var(--s-8)); padding-bottom: var(--s-12); }
  .hero__inner { gap: var(--s-6); }
  .hero__trust { margin-top: var(--s-6); padding-top: var(--s-4); }
}

.signal-graphics {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 40px hsl(48 100% 50% / 0.3));
}

.signal-graphics__tower path,
.signal-graphics__tower line {
  stroke: var(--c-amber-500);
}

.signal-graphics__waves circle {
  fill: none;
  stroke: var(--c-amber-500);
  stroke-width: 1.5;
  opacity: 0;
  transform-origin: center;
  animation: signalWave 3.5s ease-out infinite;
}

.signal-graphics__waves circle:nth-child(1) { animation-delay: 0s; }
.signal-graphics__waves circle:nth-child(2) { animation-delay: 1.2s; }
.signal-graphics__waves circle:nth-child(3) { animation-delay: 2.4s; }

@keyframes signalWave {
  0% { transform: scale(0.3); opacity: 0.7; }
  60% { opacity: 0.4; }
  100% { transform: scale(1.6); opacity: 0; }
}

.signal-graphics__nodes circle {
  fill: var(--c-amber-500);
  filter: drop-shadow(0 0 8px hsl(48 100% 50% / 0.8));
}

.signal-graphics__lines {
  stroke: hsl(48 100% 50% / 0.4);
  stroke-width: 1;
  stroke-dasharray: 3 4;
  fill: none;
}

.hero__visual-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(hsl(48 100% 50% / 0.08) 1px, transparent 1px),
    linear-gradient(90deg, hsl(48 100% 50% / 0.08) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(circle at center, black 30%, transparent 70%);
  -webkit-mask-image: radial-gradient(circle at center, black 30%, transparent 70%);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Hero для страниц услуг (компактнее)
   -------------------------------------------------------------------------- */
.hero--service {
  padding-top: calc(var(--header-h) + var(--s-12));
  padding-bottom: var(--s-16);
}

@media (min-width: 1024px) {
  .hero--service {
    padding-top: calc(var(--header-h) + var(--s-16));
    padding-bottom: var(--s-20);
  }
}

.hero--service .hero__headline {
  font-size: var(--fs-display-2);
}

/* Hero для остальных страниц (светлый, минимальный) */
.hero--light {
  background: var(--c-white);
  color: var(--c-text);
  padding-top: calc(var(--header-h) + var(--s-12));
  padding-bottom: var(--s-12);
  border-bottom: 1px solid var(--c-border);
}

.hero--light::before { display: none; }

.hero--light .hero__lead {
  color: var(--c-text-muted);
}

/* --------------------------------------------------------------------------
   Service cards
   -------------------------------------------------------------------------- */
.service-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-5);
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  transition: all var(--dur-base) var(--ease-out-quart);
  position: relative;
  text-decoration: none;
  color: var(--c-text);
  min-width: 0;
}

@media (min-width: 768px) {
  .service-card { padding: var(--s-6); }
}

.service-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
}

.service-card__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--r-md);
  background: var(--c-stone-100);
  display: grid;
  place-items: center;
  color: var(--c-text);
  transition: all var(--dur-base) var(--ease-out-quart);
}

.service-card:hover .service-card__icon {
  background: var(--c-amber-500);
  color: var(--c-ink);
  transform: scale(1.05);
}

.service-card__icon .icon { width: 24px; height: 24px; }

.service-card__title {
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.005em;
  line-height: 1.25;
  overflow-wrap: break-word;
  hyphens: auto;
  text-wrap: pretty;
}

.service-card__desc {
  font-size: var(--fs-body-sm);
  color: var(--c-text-muted);
  line-height: 1.5;
  flex: 1;
  overflow-wrap: break-word;
}

.service-card__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  color: var(--c-text);
  margin-top: auto;
}

.service-card__cta .icon {
  width: 16px;
  height: 16px;
  transition: transform var(--dur-fast);
}

.service-card:hover .service-card__cta .icon {
  transform: translateX(4px);
}

.service-card__badge {
  position: absolute;
  top: var(--s-4);
  right: var(--s-4);
}

/* --------------------------------------------------------------------------
   How it works (timeline)
   -------------------------------------------------------------------------- */
.how-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-6);
  position: relative;
}

@media (max-width: 1023px) {
  .how-steps { grid-template-columns: repeat(2, 1fr); gap: var(--s-8); }
}

@media (max-width: 639px) {
  .how-steps { grid-template-columns: 1fr; }
}

.how-step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.how-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--c-stone-50);
  border: 1.5px solid var(--c-border);
  color: var(--c-text);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  font-feature-settings: 'tnum';
  position: relative;
  z-index: 1;
}

.section--dark .how-step__num {
  background: var(--c-graphite-800);
  border-color: var(--c-graphite-700);
  color: var(--c-white);
}

.how-step__title {
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
}

.how-step__desc {
  font-size: var(--fs-body-sm);
  color: var(--c-text-muted);
  line-height: 1.55;
}

.section--dark .how-step__desc { color: var(--c-graphite-400); }

/* Connector line */
.how-step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 28px;
  left: calc(56px + var(--s-3));
  right: calc(-1 * var(--s-6));
  height: 1.5px;
  background: linear-gradient(90deg, var(--c-amber-500), transparent);
}

@media (max-width: 1023px) {
  .how-step::after { display: none !important; }
}

/* --------------------------------------------------------------------------
   Tariff cards
   -------------------------------------------------------------------------- */
.tariffs-toggle-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: var(--s-12);
}

.tariffs-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-5);
}

.tariffs-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 1279px) {
  .tariffs-grid { grid-template-columns: repeat(2, 1fr); }
  .tariffs-grid--3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 639px) {
  .tariffs-grid { grid-template-columns: 1fr; }
  .tariffs-grid--3 { grid-template-columns: 1fr; }
}

.tariff-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  padding: var(--s-6);
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  position: relative;
  transition: all var(--dur-base) var(--ease-out-quart);
}

@media (min-width: 1024px) {
  .tariff-card { padding: var(--s-8); }
}

.tariff-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--c-stone-300);
}

.tariff-card--recommended {
  border-color: var(--c-amber-500);
  border-width: 2px;
  box-shadow: var(--shadow-md), 0 0 0 4px hsl(48 100% 50% / 0.12);
}

.tariff-card--recommended:hover {
  box-shadow: var(--shadow-lg), 0 0 0 4px hsl(48 100% 50% / 0.20);
}

.tariff-card__badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
}

.tariff-card__name {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
}

.tariff-card__speed {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  color: var(--c-text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tariff-card__speed .icon {
  width: 14px;
  height: 14px;
  color: var(--c-amber-500);
}

.tariff-card__price {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  white-space: nowrap;
}

.tariff-card__price-value {
  font-size: clamp(2rem, 1.6vw + 1.5rem, 3rem);
  line-height: 1;
  font-weight: var(--fw-bold);
  letter-spacing: -0.03em;
  /* Пропорциональные цифры — для display-чисел смотрятся живее, чем tabular */
  font-variant-numeric: proportional-nums;
}

.tariff-card__price-period {
  font-size: var(--fs-body-sm);
  color: var(--c-text-muted);
  font-weight: var(--fw-medium);
}

.tariff-card__features {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  flex: 1;
  padding-top: var(--s-2);
  border-top: 1px solid var(--c-border);
  margin-top: var(--s-2);
}

.tariff-card__feature {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  font-size: var(--fs-body-sm);
  color: var(--c-text);
  line-height: 1.5;
}

.tariff-card__feature .icon {
  width: 18px;
  height: 18px;
  color: var(--c-amber-500);
  flex-shrink: 0;
  margin-top: 2px;
}

.tariff-card__feature--off {
  color: var(--c-text-subtle);
  text-decoration: line-through;
}

.tariff-card__feature--off .icon {
  color: var(--c-text-subtle);
}

/* Compare table */
.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-body-sm);
}

.compare-table thead {
  border-bottom: 2px solid var(--c-border);
}

.compare-table th {
  padding: var(--s-4) var(--s-3);
  text-align: left;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-caption);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}

.compare-table th:first-child {
  width: 30%;
}

.compare-table th[data-recommended="true"] {
  color: var(--c-text);
  position: relative;
}

.compare-table th[data-recommended="true"]::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--c-amber-50);
  z-index: -1;
  border-radius: var(--r-sm) var(--r-sm) 0 0;
}

.compare-table td {
  padding: var(--s-4) var(--s-3);
  border-bottom: 1px solid var(--c-border);
}

.compare-table td:first-child {
  font-weight: var(--fw-medium);
  color: var(--c-text);
}

.compare-table td[data-recommended="true"] {
  background: var(--c-amber-50);
}

.compare-table tbody tr:hover {
  background: var(--c-stone-50);
}

@media (max-width: 767px) {
  .compare-table-wrap {
    overflow-x: auto;
    margin-inline: calc(-1 * var(--container-pad));
    padding-inline: var(--container-pad);
  }
  .compare-table { min-width: 640px; }
}

/* --------------------------------------------------------------------------
   Calculator
   -------------------------------------------------------------------------- */

/* Service switcher (3 cards above the calc) */
.calc-switcher {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-3);
  background: var(--c-stone-100);
  padding: var(--s-2);
  border-radius: var(--r-lg);
}

@media (max-width: 767px) {
  .calc-switcher { grid-template-columns: 1fr; }
}

.calc-switcher__btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-1);
  padding: var(--s-4) var(--s-5);
  background: transparent;
  border: 0;
  border-radius: var(--r-md);
  cursor: pointer;
  text-align: left;
  transition: all var(--dur-fast) var(--ease-out-quart);
  color: var(--c-text-muted);
}

.calc-switcher__btn:hover {
  background: rgba(255, 255, 255, 0.6);
  color: var(--c-text);
}

.calc-switcher__btn.is-active,
.calc-switcher__btn[aria-pressed="true"] {
  background: var(--c-white);
  color: var(--c-text);
  box-shadow: var(--shadow-md);
}

.calc-switcher__icon {
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  background: var(--c-stone-100);
  display: grid;
  place-items: center;
  color: inherit;
  margin-bottom: var(--s-2);
  transition: all var(--dur-fast);
}

.calc-switcher__btn.is-active .calc-switcher__icon {
  background: var(--c-amber-500);
  color: var(--c-ink);
}

.calc-switcher__icon .icon { width: 18px; height: 18px; }

.calc-switcher__title {
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.005em;
}

.calc-switcher__desc {
  font-size: var(--fs-caption);
  color: var(--c-text-subtle);
}

.calc-switcher__btn.is-active .calc-switcher__desc {
  color: var(--c-text-muted);
}

.calc-block { padding-top: var(--s-8); }

.calc {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: var(--s-8);
  align-items: start;
}

@media (max-width: 1023px) {
  .calc { grid-template-columns: 1fr; }
}

.calc__main {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  padding: var(--s-6);
}

@media (min-width: 768px) {
  .calc__main { padding: var(--s-10); }
}

.calc__progress {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin-bottom: var(--s-8);
}

.calc__progress-bar {
  height: 4px;
  background: var(--c-stone-100);
  border-radius: var(--r-full);
  overflow: hidden;
}

.calc__progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--c-amber-500), var(--c-amber-400));
  border-radius: var(--r-full);
  transition: width var(--dur-base) var(--ease-out-quart);
}

.calc__progress-meta {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-caption);
  color: var(--c-text-muted);
}

.calc__step {
  display: none;
  flex-direction: column;
  gap: var(--s-6);
  animation: calcStepIn var(--dur-base) var(--ease-out-quart);
}

.calc__step--active { display: flex; }

@keyframes calcStepIn {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}

.calc__step-title {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.01em;
}

.calc__step-lead {
  color: var(--c-text-muted);
  font-size: var(--fs-body);
}

.calc__options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
}

@media (max-width: 767px) {
  .calc__options { grid-template-columns: 1fr; }
}

.calc-opt {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-5);
  background: var(--c-stone-50);
  border: 1.5px solid transparent;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out-quart);
  text-align: left;
}

.calc-opt:hover { background: var(--c-stone-100); }

.calc-opt[aria-pressed="true"],
.calc-opt.is-active {
  background: var(--c-white);
  border-color: var(--c-ink);
  box-shadow: var(--shadow-md);
}

.calc-opt__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
  background: var(--c-white);
  display: grid;
  place-items: center;
  color: var(--c-text);
}

.calc-opt[aria-pressed="true"] .calc-opt__icon,
.calc-opt.is-active .calc-opt__icon {
  background: var(--c-amber-500);
  color: var(--c-ink);
}

.calc-opt__icon .icon { width: 20px; height: 20px; }

.calc-opt__title {
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
}

.calc-opt__desc {
  font-size: var(--fs-caption);
  color: var(--c-text-muted);
  line-height: 1.4;
}

.calc-opt__price {
  font-size: var(--fs-caption);
  color: var(--c-text-muted);
  margin-top: auto;
  font-feature-settings: 'tnum';
}

/* Multi-select services */
.calc__services {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-3);
}

@media (max-width: 639px) {
  .calc__services { grid-template-columns: 1fr; }
}

.calc-service {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-4);
  background: var(--c-stone-50);
  border: 1.5px solid transparent;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: all var(--dur-fast);
}

.calc-service:hover { background: var(--c-stone-100); }

.calc-service[aria-pressed="true"] {
  background: var(--c-amber-50);
  border-color: var(--c-amber-500);
}

.calc-service__check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--c-border-strong);
  background: var(--c-white);
  flex-shrink: 0;
  margin-top: 2px;
  position: relative;
  transition: all var(--dur-fast);
}

.calc-service[aria-pressed="true"] .calc-service__check {
  background: var(--c-amber-500);
  border-color: var(--c-amber-500);
}

.calc-service[aria-pressed="true"] .calc-service__check::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 14px;
  background-repeat: no-repeat;
  background-position: center;
}

.calc-service__icon {
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  background: var(--c-white);
  display: grid;
  place-items: center;
  color: var(--c-text);
  flex-shrink: 0;
}

.calc-service__icon .icon { width: 18px; height: 18px; }

.calc-service__body { flex: 1; min-width: 0; }

.calc-service__title {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
}

.calc-service__price {
  font-size: var(--fs-caption);
  color: var(--c-text-muted);
  font-feature-settings: 'tnum';
  margin-top: 2px;
}

/* Slider in calc */
.calc-slider {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.calc-slider__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.calc-slider__label { font-size: var(--fs-body); font-weight: var(--fw-medium); }

.calc-slider__value {
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  letter-spacing: -0.005em;
  font-feature-settings: 'tnum';
}

.calc-slider__ticks {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-caption);
  color: var(--c-text-muted);
  font-feature-settings: 'tnum';
  padding-inline: 4px;
}

.calc__nav {
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  margin-top: var(--s-8);
  padding-top: var(--s-6);
  border-top: 1px solid var(--c-border);
}

/* Calc Summary (sticky) */
.calc__summary {
  background: var(--c-ink);
  color: var(--c-white);
  border-radius: var(--r-xl);
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  position: sticky;
  top: calc(var(--header-h-scrolled) + var(--s-4));
}

@media (max-width: 1023px) {
  .calc__summary { position: static; }
}

.calc__summary-title {
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-graphite-400);
}

.calc__summary-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.calc__summary-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: var(--fs-body-sm);
}

.calc__summary-item-name { color: var(--c-graphite-400); }

.calc__summary-item-value {
  font-weight: var(--fw-semibold);
  color: var(--c-white);
  font-feature-settings: 'tnum';
}

.calc__summary-empty {
  font-size: var(--fs-body-sm);
  color: var(--c-graphite-500);
  padding: var(--s-4) 0;
  text-align: center;
}

.calc__summary-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: var(--s-4);
  border-top: 1px solid var(--c-graphite-700);
}

.calc__summary-total-label { color: var(--c-graphite-400); font-size: var(--fs-body-sm); }

.calc__summary-total-value {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  color: var(--c-amber-500);
  font-feature-settings: 'tnum';
}

.calc__summary-foot {
  font-size: var(--fs-caption);
  color: var(--c-graphite-500);
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Dashboard (Личный кабинет)
   -------------------------------------------------------------------------- */
.lk-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  min-height: calc(100vh - var(--header-h));
  background: var(--c-stone-50);
}

@media (max-width: 1023px) {
  .lk-layout { grid-template-columns: 1fr; }
}

.lk-sidebar {
  background: var(--c-white);
  border-right: 1px solid var(--c-border);
  padding: var(--s-6) var(--s-3);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  position: sticky;
  top: var(--header-h);
  height: calc(100vh - var(--header-h));
  overflow-y: auto;
}

@media (max-width: 1023px) {
  .lk-sidebar { display: none; }
}

.lk-user {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3);
  background: var(--c-stone-50);
  border-radius: var(--r-md);
}

.lk-user__name {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
}

.lk-user__sub {
  font-size: var(--fs-caption);
  color: var(--c-text-muted);
}

.lk-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lk-nav__item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 10px 12px;
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  color: var(--c-text-muted);
  border-radius: var(--r-sm);
  transition: all var(--dur-fast);
}

.lk-nav__item:hover {
  background: var(--c-stone-100);
  color: var(--c-text);
}

.lk-nav__item--active {
  background: var(--c-ink);
  color: var(--c-white);
}

.lk-nav__item .icon { width: 18px; height: 18px; flex-shrink: 0; }

.lk-nav__badge {
  margin-left: auto;
  font-size: 11px;
  background: var(--c-amber-500);
  color: var(--c-ink);
  padding: 2px 6px;
  border-radius: var(--r-full);
  font-weight: var(--fw-bold);
}

.lk-main {
  padding: var(--s-6);
}

@media (min-width: 768px) {
  .lk-main { padding: var(--s-10); }
}

.lk-page-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: var(--s-4);
  margin-bottom: var(--s-8);
}

.lk-page-title {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  letter-spacing: -0.015em;
}

/* Dashboard hero card */
.lk-hero {
  background: linear-gradient(140deg, var(--c-graphite-900) 0%, var(--c-ink) 100%);
  color: var(--c-white);
  border-radius: var(--r-xl);
  padding: var(--s-8);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-6);
  align-items: center;
  margin-bottom: var(--s-6);
  position: relative;
  overflow: hidden;
}

.lk-hero::before {
  content: '';
  position: absolute;
  top: -100px; right: -50px;
  width: 300px; height: 300px;
  background: radial-gradient(circle, hsl(48 100% 50% / 0.20), transparent 60%);
  pointer-events: none;
}

@media (max-width: 767px) {
  .lk-hero { grid-template-columns: 1fr; }
}

.lk-hero__greeting {
  font-size: var(--fs-caption);
  color: var(--c-graphite-400);
  margin-bottom: var(--s-2);
}

.lk-hero__name {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--s-4);
}

.lk-hero__balance {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  margin-bottom: var(--s-2);
}

.lk-hero__balance-value {
  font-size: var(--fs-display-2);
  line-height: 1;
  font-weight: var(--fw-bold);
  color: var(--c-amber-500);
  letter-spacing: -0.03em;
  font-feature-settings: 'tnum';
}

.lk-hero__balance-cur {
  font-size: var(--fs-h4);
  color: var(--c-amber-500);
}

.lk-hero__sub {
  font-size: var(--fs-body-sm);
  color: var(--c-graphite-400);
}

.lk-hero__sub strong { color: var(--c-white); font-weight: var(--fw-semibold); }

/* Dashboard grid */
.lk-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
}

@media (max-width: 1023px) { .lk-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 639px)  { .lk-grid { grid-template-columns: 1fr; } }

.lk-card {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.lk-card__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-2);
}

.lk-card__title {
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}

.lk-metric {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
}

.lk-metric__value {
  font-size: var(--fs-display-2);
  line-height: 1;
  font-weight: var(--fw-bold);
  letter-spacing: -0.03em;
  font-feature-settings: 'tnum';
}

.lk-metric__unit { font-size: var(--fs-body-sm); color: var(--c-text-muted); }

.lk-metric__delta {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  color: var(--c-success);
}

.lk-metric__delta--down { color: var(--c-danger); }

.lk-status {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4);
  background: var(--c-success-bg);
  border-radius: var(--r-md);
}

.lk-status__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--c-success);
  box-shadow: 0 0 8px hsl(160 84% 39% / 0.6);
  animation: pulse-dot 2.5s ease-in-out infinite;
}

.lk-status__title {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  color: var(--c-success);
}

.lk-status__sub {
  font-size: var(--fs-caption);
  color: var(--c-success);
  opacity: 0.8;
}

/* Sparkline */
.sparkline {
  height: 56px;
  width: 100%;
}

.sparkline path { fill: none; stroke: var(--c-amber-500); stroke-width: 2; stroke-linejoin: round; }

.sparkline .area { fill: hsl(48 100% 50% / 0.12); stroke: none; }

/* LK payments list */
.lk-payments {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.lk-payment {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--c-border);
}

.lk-payment:last-child { border-bottom: 0; }

.lk-payment__date {
  font-size: var(--fs-caption);
  color: var(--c-text-muted);
}

.lk-payment__title {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
}

.lk-payment__amount {
  font-feature-settings: 'tnum';
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body-sm);
}

.lk-payment__amount--in { color: var(--c-success); }
.lk-payment__amount--out { color: var(--c-text); }

/* LK View — каркас раздела */
.lk-view {
  animation: lkViewIn var(--dur-base) var(--ease-out-quart);
}

@keyframes lkViewIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Loading state — пока идёт фетч с бэкенда */
.lk-view[data-state="loading"] {
  position: relative;
}

.lk-view[data-state="loading"]::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--c-amber-500), transparent);
  background-size: 50% 100%;
  background-repeat: no-repeat;
  animation: lkLoading 1.2s linear infinite;
  z-index: 10;
}

@keyframes lkLoading {
  0% { background-position: -50% 0; }
  100% { background-position: 150% 0; }
}

/* Skeleton placeholder для текстовых значений — когда они пустые на старте */
[data-bind]:empty::before {
  content: '———';
  color: var(--c-stone-300);
  letter-spacing: -0.05em;
}

/* Empty list — placeholder когда данные ещё грузятся */
[data-bind-list]:empty {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  min-height: 80px;
}

[data-bind-list]:empty::before,
[data-bind-list]:empty::after {
  content: '';
  height: 56px;
  background: linear-gradient(90deg, var(--c-stone-100) 0%, var(--c-stone-200) 50%, var(--c-stone-100) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.5s linear infinite;
  border-radius: var(--r-sm);
}

.lk-view[data-state="error"]::after {
  content: 'Не удалось загрузить данные. Обновите страницу.';
  display: block;
  padding: var(--s-4);
  background: var(--c-danger-bg);
  color: var(--c-danger);
  border-radius: var(--r-md);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  margin-top: var(--s-4);
}

.lk-section {
  margin-bottom: var(--s-8);
}

.lk-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-4);
  margin-bottom: var(--s-5);
}

.lk-section-head__title {
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.005em;
}

/* Operation row (история операций) */
.op-list {
  display: flex;
  flex-direction: column;
}

.op {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--s-4);
  align-items: center;
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--c-border);
}

@media (max-width: 639px) {
  .op { grid-template-columns: 1fr auto; }
  .op__status { grid-column: 1 / -1; }
}

.op:last-child { border-bottom: 0; }

.op__main { display: flex; flex-direction: column; gap: 2px; }
.op__title { font-size: var(--fs-body-sm); font-weight: var(--fw-medium); }
.op__date { font-size: var(--fs-caption); color: var(--c-text-muted); }

.op__amount {
  font-feature-settings: 'tnum';
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body-sm);
  white-space: nowrap;
}
.op__amount--in { color: var(--c-success); }
.op__amount--out { color: var(--c-text); }

.op__status .badge { font-size: 11px; }

/* Service status card */
.svc-card {
  display: flex;
  align-items: flex-start;
  gap: var(--s-5);
  padding: var(--s-6);
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
}

.svc-card__icon {
  width: 56px;
  height: 56px;
  border-radius: var(--r-md);
  background: var(--c-stone-100);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.svc-card__icon .icon { width: 26px; height: 26px; color: var(--c-text); }

.svc-card--active .svc-card__icon {
  background: var(--c-amber-500);
  color: var(--c-ink);
}

.svc-card--active .svc-card__icon .icon { color: var(--c-ink); }

.svc-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  min-width: 0;
}

.svc-card__head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
}

.svc-card__title {
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.005em;
}

.svc-card__params {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4) var(--s-6);
  margin-top: var(--s-2);
  font-size: var(--fs-body-sm);
}

.svc-card__param {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.svc-card__param-label { font-size: var(--fs-caption); color: var(--c-text-muted); letter-spacing: 0.04em; text-transform: uppercase; }
.svc-card__param-value { font-weight: var(--fw-semibold); font-feature-settings: 'tnum'; }

.svc-card__actions {
  display: flex;
  gap: var(--s-2);
  margin-top: var(--s-4);
  flex-wrap: wrap;
}

/* Current tariff card (большая карточка) */
.tariff-current {
  background: linear-gradient(140deg, var(--c-graphite-900) 0%, var(--c-ink) 100%);
  color: var(--c-white);
  border-radius: var(--r-xl);
  padding: var(--s-8);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-6);
  align-items: center;
  position: relative;
  overflow: hidden;
}

@media (max-width: 767px) {
  .tariff-current { grid-template-columns: 1fr; }
}

.tariff-current::before {
  content: '';
  position: absolute;
  top: -100px; right: -50px;
  width: 320px; height: 320px;
  background: radial-gradient(circle, hsl(48 100% 50% / 0.18), transparent 60%);
  pointer-events: none;
}

.tariff-current__name {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  letter-spacing: -0.015em;
  margin-bottom: var(--s-2);
}

.tariff-current__params {
  display: flex;
  gap: var(--s-6) var(--s-8);
  margin-top: var(--s-4);
  flex-wrap: wrap;
  position: relative;
}

.tariff-current__param-label {
  font-size: var(--fs-caption);
  color: var(--c-graphite-400);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.tariff-current__param-value {
  font-size: var(--fs-h3);
  color: var(--c-white);
  font-weight: var(--fw-bold);
  font-feature-settings: 'tnum';
}

.tariff-current__price {
  font-size: var(--fs-display-2);
  color: var(--c-amber-500);
  font-weight: var(--fw-bold);
  letter-spacing: -0.03em;
  font-feature-settings: 'tnum';
  line-height: 1;
}

/* Speed test block */
.speedtest {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-5);
  background: var(--c-stone-50);
  border-radius: var(--r-lg);
  flex-wrap: wrap;
}

.speedtest__result {
  font-size: var(--fs-body-lg);
  font-feature-settings: 'tnum';
}

/* Support: ticket */
.tickets { display: flex; flex-direction: column; gap: var(--s-3); }

.ticket {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: var(--s-5);
  cursor: pointer;
  transition: border-color var(--dur-fast), transform var(--dur-fast);
}

.ticket:hover {
  border-color: var(--c-graphite-400);
  transform: translateY(-1px);
}

.ticket__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--s-2);
}

.ticket__title {
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--s-1);
}

.ticket__last {
  font-size: var(--fs-caption);
  color: var(--c-text-muted);
}

/* ==========================================================================
   NOTIFICATIONS DROPDOWN
   ========================================================================== */
.notif-trigger {
  position: relative;
}

.notif-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--c-amber-500);
  color: var(--c-ink);
  border-radius: var(--r-full);
  font-size: 10px;
  font-weight: var(--fw-bold);
  display: grid;
  place-items: center;
  border: 2px solid var(--c-white);
  font-feature-settings: 'tnum';
  pointer-events: none;
}

.notif-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: min(380px, calc(100vw - 32px));
  max-height: 70vh;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xl);
  z-index: var(--z-modal);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: notifIn var(--dur-base) var(--ease-out-quart);
}

@keyframes notifIn {
  from { opacity: 0; transform: translateY(-8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.notif-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--c-border);
}

.notif-panel__title {
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.005em;
}

.notif-panel__list {
  overflow-y: auto;
  flex: 1;
  max-height: 60vh;
}

.notif {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--c-border);
  cursor: pointer;
  transition: background var(--dur-fast);
  position: relative;
}

.notif:hover { background: var(--c-stone-50); }
.notif:last-child { border-bottom: 0; }
.notif--read { opacity: 0.6; }

.notif__icon {
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
  background: var(--c-stone-100);
  color: var(--c-text);
  flex-shrink: 0;
}

.notif__icon--success { background: var(--c-success-bg); color: var(--c-success); }
.notif__icon--warning { background: var(--c-warning-bg); color: #92400E; }
.notif__icon--info    { background: var(--c-info-bg);    color: var(--c-info); }
.notif__icon--promo   { background: hsl(48 100% 50% / 0.15); color: var(--c-amber-700); }

.notif__title {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
}

.notif__msg {
  font-size: var(--fs-caption);
  color: var(--c-text-muted);
  margin-top: 2px;
  line-height: 1.45;
}

.notif__time {
  font-size: 11px;
  color: var(--c-text-subtle);
  margin-top: 4px;
}

.notif__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-amber-500);
  align-self: center;
}

.notif-panel__empty {
  padding: var(--s-8) var(--s-6);
  text-align: center;
  color: var(--c-text-muted);
  font-size: var(--fs-body-sm);
}

/* ==========================================================================
   CMD+K COMMAND PALETTE
   ========================================================================== */
.cmdk {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--s-12) var(--s-4) var(--s-4);
}

.cmdk .modal__scrim {
  position: absolute;
  inset: 0;
  background: hsl(0 0% 4% / 0.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: cmdkScrim var(--dur-base) var(--ease-out-quart);
}

@keyframes cmdkScrim {
  from { opacity: 0; }
  to { opacity: 1; }
}

.cmdk__box {
  position: relative;
  width: 100%;
  max-width: 600px;
  background: var(--c-white);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 70vh;
  animation: cmdkIn var(--dur-base) var(--ease-out-quart);
}

@keyframes cmdkIn {
  from { opacity: 0; transform: translateY(-12px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.cmdk__head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--c-border);
}

.cmdk__head .icon { color: var(--c-text-subtle); flex-shrink: 0; }

.cmdk__input {
  flex: 1;
  font-size: var(--fs-body-lg);
  background: transparent;
  border: 0;
  outline: none;
  color: var(--c-text);
  font-family: inherit;
  padding: 0;
}

.cmdk__input::placeholder { color: var(--c-text-subtle); }

.cmdk__hint {
  font-size: 11px;
  font-weight: var(--fw-semibold);
  color: var(--c-text-subtle);
  background: var(--c-stone-100);
  padding: 3px 8px;
  border-radius: var(--r-sm);
  font-family: var(--ff-mono);
  letter-spacing: 0.05em;
}

.cmdk__list {
  overflow-y: auto;
  flex: 1;
  padding: var(--s-2) 0;
}

.cmdk__section {
  font-size: 11px;
  font-weight: var(--fw-bold);
  color: var(--c-text-subtle);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: var(--s-3) var(--s-5) var(--s-1);
}

.cmdk__item {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-5);
  cursor: pointer;
  align-items: center;
  transition: background var(--dur-instant);
}

.cmdk__item:hover,
.cmdk__item.is-active {
  background: var(--c-amber-50);
}

.cmdk__item-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  background: var(--c-stone-100);
  color: var(--c-text);
  display: grid;
  place-items: center;
}

.cmdk__item.is-active .cmdk__item-icon {
  background: var(--c-amber-500);
  color: var(--c-ink);
}

.cmdk__item-title {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
}

.cmdk__item-desc {
  font-size: var(--fs-caption);
  color: var(--c-text-muted);
  margin-top: 2px;
}

.cmdk__kbd {
  font-family: var(--ff-mono);
  font-size: 13px;
  background: var(--c-white);
  border: 1px solid var(--c-border-strong);
  padding: 2px 7px;
  border-radius: var(--r-xs);
  color: var(--c-text-muted);
}

.cmdk__empty {
  padding: var(--s-10);
  text-align: center;
  color: var(--c-text-muted);
}

/* CmdK trigger button (в шапке) */
.cmdk-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 6px 10px 6px 10px;
  background: var(--c-stone-100);
  border: 0;
  border-radius: var(--r-sm);
  font-size: var(--fs-caption);
  color: var(--c-text-muted);
  cursor: pointer;
  transition: background var(--dur-fast);
}

.cmdk-trigger:hover { background: var(--c-stone-200); color: var(--c-text); }

.cmdk-trigger .icon { width: 14px; height: 14px; }

.cmdk-trigger__kbd {
  font-family: var(--ff-mono);
  font-size: 10px;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  padding: 1px 5px;
  border-radius: 3px;
  letter-spacing: 0.04em;
  margin-left: var(--s-1);
}

/* ==========================================================================
   ACTIVITY FEED
   ========================================================================== */
.activity-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 360px;
  overflow-y: auto;
}

.activity-item {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: var(--s-3);
  align-items: center;
  padding: var(--s-3) var(--s-2);
  border-radius: var(--r-sm);
  transition: background var(--dur-fast);
}

.activity-item:hover { background: var(--c-stone-50); }

.activity-item__icon {
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  background: var(--c-stone-100);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: var(--c-text);
}

.activity-item--payment   .activity-item__icon { background: hsl(160 84% 39% / 0.12); color: var(--c-success); }
.activity-item--auth      .activity-item__icon { background: var(--c-info-bg);       color: var(--c-info); }
.activity-item--service   .activity-item__icon { background: var(--c-amber-50);      color: var(--c-amber-700); }
.activity-item--speedtest .activity-item__icon { background: hsl(280 60% 92%);       color: hsl(280 60% 50%); }
.activity-item--support   .activity-item__icon { background: var(--c-warning-bg);    color: #92400E; }

.activity-item__title {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
}

.activity-item__detail {
  font-size: var(--fs-caption);
  color: var(--c-text-muted);
  margin-top: 1px;
}

.activity-item__time {
  font-size: var(--fs-caption);
  color: var(--c-text-subtle);
  white-space: nowrap;
}

/* ==========================================================================
   SPEED TEST WIDGET (gauge)
   ========================================================================== */
.speedtest-widget {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-5);
}

.speedtest-widget__gauge {
  position: relative;
  width: 160px;
  height: 160px;
}

.speedtest-widget__gauge svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.speedtest-widget__bg {
  fill: none;
  stroke: var(--c-stone-200);
  stroke-width: 6;
}

.speedtest-widget__progress {
  fill: none;
  stroke: var(--c-amber-500);
  stroke-width: 6;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.05s linear;
  filter: drop-shadow(0 0 8px hsl(48 100% 50% / 0.5));
}

.speedtest-widget__value {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.speedtest-widget__value strong {
  font-size: 2.5rem;
  font-weight: var(--fw-bold);
  letter-spacing: -0.04em;
  font-feature-settings: 'tnum';
  line-height: 1;
}

.speedtest-widget__value small {
  font-size: var(--fs-caption);
  color: var(--c-text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.speedtest-widget__details {
  display: flex;
  gap: var(--s-6);
}

.speedtest-widget__detail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.speedtest-widget__detail strong {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  font-feature-settings: 'tnum';
}

.speedtest-widget__detail small {
  font-size: 11px;
  color: var(--c-text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ==========================================================================
   ИМПРУВ: Skeleton (для пустых data-bind)
   ========================================================================== */
.lk-view[data-state="loading"] [data-bind]:empty,
.lk-view[data-state="loading"] [data-bind*="."]:empty {
  display: inline-block;
  min-width: 5em;
  height: 0.85em;
  border-radius: 4px;
  background: linear-gradient(
    90deg,
    var(--c-stone-100) 0%,
    var(--c-stone-200) 50%,
    var(--c-stone-100) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
  vertical-align: middle;
  position: relative;
  top: -2px;
}

.lk-view[data-state="loading"] [data-bind]:empty::before,
.lk-view[data-state="loading"] [data-bind*="."]:empty::before {
  content: '';
}

/* Settings — row */
.settings-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s-4);
  align-items: center;
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--c-border);
}

.settings-row:last-child { border-bottom: 0; }

.settings-row__title { font-size: var(--fs-body); font-weight: var(--fw-medium); }
.settings-row__desc { font-size: var(--fs-caption); color: var(--c-text-muted); margin-top: 2px; }

/* Promo card */
.lk-promo {
  background: linear-gradient(135deg, var(--c-amber-500), var(--c-amber-400));
  color: var(--c-ink);
  border: 0;
  position: relative;
  overflow: hidden;
}

.lk-promo::before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 160px; height: 160px;
  background: radial-gradient(circle, rgba(255,255,255,0.4), transparent 60%);
}

.lk-promo__title {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
  position: relative;
}

.lk-promo__desc {
  font-size: var(--fs-body-sm);
  line-height: 1.5;
  position: relative;
  opacity: 0.85;
}

/* --------------------------------------------------------------------------
   Payment page
   -------------------------------------------------------------------------- */
.pay-form {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  padding: var(--s-6);
}

@media (min-width: 768px) {
  .pay-form { padding: var(--s-10); }
}

.pay-amounts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-2);
}

@media (max-width: 480px) { .pay-amounts { grid-template-columns: repeat(2, 1fr); } }

.pay-amount {
  height: 44px;
  padding: 0 var(--s-3);
  background: var(--c-stone-50);
  border: 1.5px solid transparent;
  border-radius: var(--r-md);
  font-weight: var(--fw-semibold);
  font-feature-settings: 'tnum';
  cursor: pointer;
  transition: all var(--dur-fast);
}

.pay-amount:hover { background: var(--c-stone-100); }

.pay-amount[aria-pressed="true"] {
  background: var(--c-white);
  border-color: var(--c-ink);
}

.pay-methods {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-3);
}

@media (max-width: 480px) { .pay-methods { grid-template-columns: 1fr; } }

.pay-method {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-4);
  background: var(--c-stone-50);
  border: 1.5px solid transparent;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: all var(--dur-fast);
  text-align: center;
}

.pay-method:hover { background: var(--c-stone-100); }

.pay-method[aria-pressed="true"] {
  background: var(--c-white);
  border-color: var(--c-ink);
  box-shadow: var(--shadow-sm);
}

.pay-method__logo {
  height: 28px;
  display: grid;
  place-items: center;
  color: var(--c-text);
}

.pay-method__name {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
}

.pay-trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px solid var(--c-border);
  margin-top: var(--s-2);
}

.pay-trust__item {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-caption);
  color: var(--c-text-muted);
}

.pay-trust__item .icon {
  width: 14px;
  height: 14px;
  color: var(--c-success);
}

.pay-summary {
  background: var(--c-stone-50);
  border-radius: var(--r-lg);
  padding: var(--s-6);
}

.pay-summary__title {
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  margin-bottom: var(--s-4);
}

.pay-summary__row {
  display: flex;
  justify-content: space-between;
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--c-border);
  font-size: var(--fs-body-sm);
}

.pay-summary__row:last-child { border: 0; }

.pay-summary__row strong { font-feature-settings: 'tnum'; }

/* --------------------------------------------------------------------------
   Auth pages (Login / Register)
   -------------------------------------------------------------------------- */
.auth {
  min-height: calc(100vh - var(--header-h));
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  background: var(--c-stone-50);
}

@media (max-width: 1023px) {
  .auth { grid-template-columns: 1fr; }
}

.auth__visual {
  background: linear-gradient(160deg, var(--c-graphite-900) 0%, var(--c-ink) 100%);
  color: var(--c-white);
  padding: var(--s-12) var(--s-10);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}

@media (max-width: 1023px) {
  .auth__visual {
    padding: var(--s-8);
    min-height: 240px;
    display: none;
  }
}

.auth__visual::before {
  content: '';
  position: absolute;
  top: -100px; right: -50px;
  width: 400px; height: 400px;
  background: radial-gradient(circle, hsl(48 100% 50% / 0.18), transparent 60%);
  pointer-events: none;
}

.auth__visual-title {
  font-size: var(--fs-display-2);
  line-height: 1;
  font-weight: var(--fw-bold);
  letter-spacing: -0.03em;
  max-width: 14ch;
  text-wrap: balance;
}

.auth__visual em {
  font-style: normal;
  background: linear-gradient(135deg, var(--c-amber-500), var(--c-amber-300));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.auth__visual-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin-top: var(--s-10);
  position: relative;
}

.auth__visual-item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--fs-body);
  color: var(--c-graphite-400);
}

.auth__visual-item .icon {
  width: 18px;
  height: 18px;
  color: var(--c-amber-500);
  flex-shrink: 0;
}

.auth__visual-foot {
  font-size: var(--fs-caption);
  color: var(--c-graphite-500);
  position: relative;
}

.auth__form-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-12) var(--s-6);
}

.auth__form {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
}

.auth__head {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.auth__title {
  font-size: var(--fs-h2);
  line-height: 1.15;
  font-weight: var(--fw-bold);
  letter-spacing: -0.015em;
}

.auth__lead {
  color: var(--c-text-muted);
  font-size: var(--fs-body);
}

.auth__error {
  background: var(--c-danger-bg);
  border: 1px solid hsl(0 84% 60% / 0.3);
  color: var(--c-danger);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  font-size: var(--fs-body-sm);
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.auth__resend {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  text-align: center;
}

.auth__resend-timer {
  font-size: var(--fs-caption);
  color: var(--c-text-subtle);
  font-feature-settings: 'tnum';
}

.auth__edit-phone {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-body-sm);
  color: var(--c-text-muted);
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;
}

.auth__edit-phone:hover { color: var(--c-text); }

.auth__phone-display {
  font-weight: var(--fw-semibold);
  color: var(--c-text);
  font-feature-settings: 'tnum';
}

.auth__code-input {
  text-align: center;
  font-size: 1.75rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.4em;
  font-feature-settings: 'tnum';
  height: 64px;
}

.auth__alt {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin: var(--s-2) 0;
  font-size: var(--fs-caption);
  color: var(--c-text-subtle);
}

.auth__alt::before,
.auth__alt::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--c-border);
}

.auth__foot {
  text-align: center;
  font-size: var(--fs-body-sm);
  color: var(--c-text-muted);
  margin-top: var(--s-2);
}

.auth__foot a {
  color: var(--c-text);
  font-weight: var(--fw-semibold);
}
.auth__foot a:hover { color: var(--c-amber-600); }

/* Header авторизованного пользователя */
.header-user {
  display: none;
  align-items: center;
  gap: var(--s-2);
  padding: 6px 12px 6px 6px;
  background: var(--c-stone-100);
  border-radius: var(--r-full);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  color: var(--c-text);
  transition: background var(--dur-fast);
}

.header-user:not([hidden]) { display: inline-flex; }

.header-user:hover { background: var(--c-stone-200); }

.header-user .avatar { width: 28px; height: 28px; font-size: 11px; }

.site-header--on-dark .header-user {
  background: rgba(255, 255, 255, 0.1);
  color: var(--c-white);
}

.site-header--on-dark .header-user:hover {
  background: rgba(255, 255, 255, 0.18);
}
/* Header user-wrap + logout */
.header-user-wrap {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
}
.header-user__name {
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.header-user__logout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-full);
  background: var(--c-stone-100);
  color: var(--c-muted);
  transition: background var(--dur-fast), color var(--dur-fast);
  flex-shrink: 0;
}
.header-user__logout:hover {
  background: var(--c-stone-200);
  color: var(--c-text);
}
.site-header--on-dark .header-user__logout {
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.7);
}
.site-header--on-dark .header-user__logout:hover {
  background: rgba(255,255,255,0.18);
  color: var(--c-white);
}


/* --------------------------------------------------------------------------
   FAQ list
   -------------------------------------------------------------------------- */
.faq-cats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-bottom: var(--s-8);
}

/* --------------------------------------------------------------------------
   Reviews
   -------------------------------------------------------------------------- */
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
}

@media (max-width: 1023px) { .reviews-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 639px) { .reviews-grid { grid-template-columns: 1fr; } }

.review {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  transition: all var(--dur-base) var(--ease-out-quart);
}

.review:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.review__head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.review__name {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body);
}

.review__location {
  font-size: var(--fs-caption);
  color: var(--c-text-muted);
}

.review__rating { color: var(--c-amber-500); }

.review__quote {
  font-size: var(--fs-body-sm);
  line-height: 1.6;
  color: var(--c-text);
  flex: 1;
}

.review__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--s-4);
  border-top: 1px solid var(--c-border);
  font-size: var(--fs-caption);
  color: var(--c-text-muted);
}

/* --------------------------------------------------------------------------
   Coverage map (контур края)
   -------------------------------------------------------------------------- */
.coverage {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: var(--s-12);
  align-items: center;
}

@media (max-width: 1023px) { .coverage { grid-template-columns: 1fr; } }

.coverage__map {
  position: relative;
  background: var(--c-stone-50);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  padding: 0;
  aspect-ratio: 16 / 11;
  overflow: hidden;
}

.coverage__map svg {
  width: 100%;
  height: 100%;
  font-family: var(--ff-sans);
  display: block;
}

/* Море (фон под всем) */
.coverage__sea {
  /* fill задан через linearGradient в SVG */
}

/* Контур края — самый важный элемент */
.coverage__krai {
  fill: hsl(40 30% 97%);
  stroke: var(--c-ink);
  stroke-width: 1.4;
  stroke-linejoin: round;
  stroke-linecap: round;
}

/* Адыгея — анклав внутри края, чуть другой оттенок */
.coverage__adygea {
  fill: hsl(40 25% 93%);
  stroke: var(--c-graphite-500);
  stroke-width: 1;
  stroke-dasharray: 4 3;
  stroke-linejoin: round;
}

/* Внутренние границы районов */
.coverage__districts {
  fill: none;
  stroke: var(--c-graphite-400);
  stroke-width: 0.5;
  stroke-linejoin: round;
  opacity: 0.5;
  pointer-events: none;
}

.coverage__districts--adygea {
  stroke: var(--c-graphite-500);
  opacity: 0.4;
}

/* Кавказ — намёк через диагональную штриховку */
.coverage__mountains {
  opacity: 0.7;
  pointer-events: none;
}

/* Река Кубань — тонкая голубая линия */
.coverage__river {
  fill: none;
  stroke: hsl(205 60% 70%);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.85;
}

/* Дороги — едва заметные линии */
.coverage__roads {
  fill: none;
  stroke: var(--c-graphite-400);
  stroke-width: 0.8;
  stroke-linecap: round;
  stroke-dasharray: 2 3;
  opacity: 0.55;
  pointer-events: none;
}

/* Подписи морей */
.coverage__sea-label {
  font-size: 13px;
  font-weight: var(--fw-semibold);
  fill: hsl(205 35% 50%);
  letter-spacing: 0.18em;
  pointer-events: none;
}

/* Подпись «Адыгея» */
.coverage__region-label {
  font-size: 11px;
  font-weight: var(--fw-bold);
  fill: var(--c-graphite-500);
  letter-spacing: 0.14em;
  text-anchor: middle;
  pointer-events: none;
}

/* Подписи городов */
.coverage__city-label {
  font-size: 11px;
  font-weight: var(--fw-medium);
  fill: var(--c-graphite-700);
  pointer-events: none;
  paint-order: stroke;
  stroke: hsl(40 30% 97%);
  stroke-width: 3px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.coverage__city-label--main {
  font-size: 13px;
  font-weight: var(--fw-bold);
  fill: var(--c-ink);
}

/* Точки городов — amber с glow */
.coverage__map circle.dot {
  fill: var(--c-amber-500);
  stroke: var(--c-ink);
  stroke-width: 1.2;
  filter: drop-shadow(0 0 8px hsl(48 100% 50% / 0.55));
  cursor: pointer;
  transition: r var(--dur-fast), filter var(--dur-fast);
}

.coverage__map circle.dot:hover {
  r: 9;
  filter: drop-shadow(0 0 14px hsl(48 100% 50% / 0.85));
}

.coverage__map circle.dot--main {
  stroke-width: 1.6;
}

.coverage__cities {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-2);
  font-size: var(--fs-body-sm);
  margin-top: var(--s-6);
}

.coverage__city {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--c-text-muted);
}

.coverage__city::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--c-amber-500);
  border-radius: 50%;
}

/* --------------------------------------------------------------------------
   Project (case) cards
   -------------------------------------------------------------------------- */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
}

@media (max-width: 1023px) { .projects-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 639px)  { .projects-grid { grid-template-columns: 1fr; } }

.project {
  position: relative;
  display: block;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--c-stone-100);
  cursor: pointer;
}

.project__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 75% 25%, hsl(48 100% 50% / 0.22), transparent 55%),
    radial-gradient(circle at 20% 80%, hsl(48 100% 50% / 0.10), transparent 60%),
    linear-gradient(135deg, var(--c-graphite-700), var(--c-graphite-900));
  overflow: hidden;
}

.project__bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(hsl(48 100% 50% / 0.06) 1px, transparent 1px),
    linear-gradient(90deg, hsl(48 100% 50% / 0.06) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: radial-gradient(circle at 70% 30%, black 10%, transparent 75%);
  -webkit-mask-image: radial-gradient(circle at 70% 30%, black 10%, transparent 75%);
  pointer-events: none;
}

.project__art {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 72%;
  height: auto;
  transform: translate(-50%, -58%);
  color: var(--c-amber-500);
  opacity: 0.85;
  filter: drop-shadow(0 0 18px hsl(48 100% 50% / 0.35));
  transition: transform var(--dur-slow) var(--ease-out-quart), opacity var(--dur-base) var(--ease-out-quart);
}

.project:hover .project__art {
  transform: translate(-50%, -62%) scale(1.04);
  opacity: 1;
}

.project__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--s-5);
  background: linear-gradient(180deg, transparent 50%, hsl(0 0% 0% / 0.85) 100%);
  color: var(--c-white);
  transition: background var(--dur-base) var(--ease-out-quart);
}

.project:hover .project__overlay {
  background: linear-gradient(180deg, hsl(0 0% 0% / 0.45) 0%, hsl(0 0% 0% / 0.85) 100%);
}

.project__title {
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.005em;
}

.project__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: var(--s-2);
}

.project__tag {
  padding: 2px 10px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(8px);
  border-radius: var(--r-full);
  font-size: 11px;
  font-weight: var(--fw-medium);
}

.project__result {
  font-size: var(--fs-caption);
  color: rgba(255, 255, 255, 0.75);
  margin-top: var(--s-3);
}

/* --------------------------------------------------------------------------
   Form sections (заявка)
   -------------------------------------------------------------------------- */
.form-section {
  background: var(--c-white);
  border-radius: var(--r-xl);
  border: 1px solid var(--c-border);
  padding: var(--s-6);
}

@media (min-width: 768px) {
  .form-section { padding: var(--s-10); }
}

.form-section--ink {
  background: var(--c-ink);
  color: var(--c-white);
  border-color: transparent;
}

.form-section--ink .input,
.form-section--ink .textarea,
.form-section--ink .select {
  background: var(--c-graphite-800);
  border-color: var(--c-graphite-700);
  color: var(--c-white);
}

.form-section--ink .input:focus,
.form-section--ink .textarea:focus,
.form-section--ink .select:focus {
  border-color: var(--c-amber-500);
  box-shadow: 0 0 0 4px hsl(48 100% 50% / 0.18);
}

.form-section--ink .input::placeholder,
.form-section--ink .textarea::placeholder { color: var(--c-graphite-500); }

.form-section--ink .field__label { color: var(--c-graphite-400); }
.form-section--ink .field__hint { color: var(--c-graphite-500); }

/* ---- Hero: typewriter cursor ---- */
.hero__cursor {
  display: inline-block;
  width: 2px;
  height: 1.05em;
  background: var(--c-white, #fff);
  vertical-align: text-top;
  margin-left: 3px;
  border-radius: 1px;
  animation: cursorBlink 1s step-end infinite;
}
@keyframes cursorBlink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}
/* Suppress per-word heroWordIn when typewriter takes over */
.hero__headline.is-typewriter .hero__word {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}