/* ===========================================
   SONAR ANALYTICS SECTION
   Bento layout · monochrome violet · animated reveal
   =========================================== */

   .analytics-section {
    position: relative;
    background: #08051a;
    padding: 64px 0 110px;
    overflow: hidden;
    isolation: isolate;
  }

  /* ---------- GHOST METRIC WIDGETS (из центра · читаемые · разные типы) ---------- */

  /* Слой привязан к .analytics-cards-wrap (inset = горизонтальный padding), % совпадают с сеткой бенто */
  .analytics-ghost-metrics {
    position: absolute;
    left: 16px;
    right: 16px;
    top: 0;
    bottom: 0;
    z-index: 1;
    pointer-events: none;
    overflow: visible;
  }

  /*
   * Позиции ghost-карточек: править блок ниже (не в HTML).
   * --gx / --gy — % ширины и высоты .analytics-ghost-metrics (полоса над бенто, с padding wrap).
   */
  .analytics-ghost--L1 {
    --gx: -10%;
    --gy: 0%;
    --r: 8deg;
    --d: 0.04s;
    --float: 10.5s;
  }
  .analytics-ghost--L2 {
    --gx: -15%;
    --gy: 45%;
    --r: -10deg;
    --d: 0.1s;
    --float: 10.8s;
  }
  .analytics-ghost--L3 {
    --gx: -10%;
    --gy: 95%;
    --r: -7deg;
    --d: 0.18s;
    --float: 9.8s;
  }
  .analytics-ghost--R1 {
    --gx: 107%;
    --gy: 0%;
    --r: -6deg;
    --d: 0.06s;
    --float: 11s;
  }
  .analytics-ghost--R2 {
    --gx: 114%;
    --gy: 45%;
    --r: 10deg;
    --d: 0.14s;
    --float: 10.5s;
  }
  .analytics-ghost--R3 {
    --gx: 111%;
    --gy: 95%;
    --r: 7deg;
    --d: 0.22s;
    --float: 11.2s;
  }

  .analytics-ghost {
    position: absolute;
    left: var(--gx, 50%);
    top: var(--gy, 50%);
    width: 0;
    height: 0;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.4) rotate(calc(var(--r, 0deg) * 0.4));
    transform-origin: center center;
  }

  .analytics-section.is-visible .analytics-ghost {
    animation: analytics-ghost-emerge 1.05s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0s) forwards;
  }

  @keyframes analytics-ghost-emerge {
    0% {
      opacity: 0;
      transform: translate(-50%, -50%) scale(0.4) rotate(calc(var(--r, 0deg) * 0.4));
    }
    100% {
      opacity: 0.92;
      transform: translate(-50%, -50%) scale(1) rotate(var(--r, 0deg));
    }
  }

  /* «Призрачность» без размытия текста: лёгкая прозрачность карточки */
  .analytics-ghost__card {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 8px;
    padding: 14px 14px 12px;
    border-radius: 18px;
    opacity: 0.82;

    background:
      radial-gradient(120% 80% at 0% 0%, rgba(216, 180, 254, 0.12), transparent 50%),
      linear-gradient(160deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.012) 100%),
      rgba(14, 11, 32, 0.36);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.12),
      0 8px 24px -10px rgba(0, 0, 0, 0.45);

    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
  }

  .analytics-ghost__card--xs {
    width: min(124px, 14.5cqi);
    height: min(124px, 14.5cqi);
    border-radius: 16px;
    padding: 10px 11px 9px;
    gap: 6px;
  }

  .analytics-ghost__card--sm {
    width: min(148px, 17.2cqi);
    height: min(148px, 17.2cqi);
    border-radius: 17px;
  }

  .analytics-ghost__card--md {
    width: min(172px, 19.5cqi);
    height: min(172px, 19.5cqi);
    border-radius: 18px;
    padding: 15px;
  }

  .analytics-ghost__card--lg {
    width: min(200px, 21.5cqi);
    height: min(200px, 21.5cqi);
    border-radius: 20px;
    padding: 16px 16px 14px;
    gap: 9px;
  }

  /* Масштаб текста/деталей под размер карточки */
  .analytics-ghost__card--xs .analytics-ghost__label {
    font-size: 8px;
    letter-spacing: 0.12em;
  }

  .analytics-ghost__card--xs .analytics-ghost__value {
    font-size: clamp(20px, 2.2cqi, 26px);
  }

  .analytics-ghost__card--xs .analytics-ghost__meta {
    font-size: 9px;
  }

  .analytics-ghost__card--xs .analytics-ghost__pill {
    font-size: 11px;
    padding: 5px 8px;
    margin-top: 2px;
  }

  .analytics-ghost__card--xs .analytics-ghost__bars {
    min-height: 40px;
    padding: 2px 0 0;
    gap: 3px;
  }

  .analytics-ghost__card--xs .analytics-ghost__donut {
    width: min(52px, 13cqi);
    height: min(52px, 13cqi);
    margin-top: 2px;
  }

  .analytics-ghost__card--xs .analytics-ghost__donut::after {
    inset: 8px;
  }

  .analytics-ghost__card--xs .analytics-ghost__donut-val {
    font-size: 12px;
  }

  .analytics-ghost__card--xs .analytics-ghost__spark {
    min-height: 28px;
    max-height: 38px;
    margin-top: 0;
  }

  .analytics-ghost__card--lg .analytics-ghost__label {
    font-size: 10px;
  }

  .analytics-ghost__card--lg .analytics-ghost__value {
    font-size: clamp(30px, 3.1cqi, 38px);
  }

  .analytics-ghost__card--lg .analytics-ghost__meta {
    font-size: 10px;
  }

  .analytics-ghost__card--lg .analytics-ghost__pill {
    font-size: 14px;
    padding: 7px 12px;
  }

  .analytics-ghost__card--lg .analytics-ghost__bars {
    min-height: 58px;
    padding: 6px 0 3px;
  }

  .analytics-ghost__card--lg .analytics-ghost__donut {
    width: min(84px, 22cqi);
    height: min(84px, 22cqi);
    margin-top: 8px;
  }

  .analytics-ghost__card--lg .analytics-ghost__donut::after {
    inset: 13px;
  }

  .analytics-ghost__card--lg .analytics-ghost__donut-val {
    font-size: 18px;
  }

  .analytics-ghost__card--lg .analytics-ghost__split-k {
    font-size: 9px;
  }

  .analytics-ghost__card--lg .analytics-ghost__split-v {
    font-size: 20px;
  }

  .analytics-ghost__card--lg .analytics-ghost__split-row {
    padding-bottom: 12px;
  }

  .analytics-section.is-visible .analytics-ghost__card {
    animation: analytics-ghost-float-inner var(--float, 11s) ease-in-out calc(var(--d, 0s) + 0.95s) infinite;
  }

  @keyframes analytics-ghost-float-inner {
    0%, 100% { transform: translate(-50%, -50%) translate(0, 0); }
    50%      { transform: translate(-50%, -50%) translate(var(--float-nudge-x, 0), var(--float-nudge-y, -7px)); }
  }

  .analytics-ghost__label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(216, 180, 254, 0.88);
    line-height: 1.2;
  }

  .analytics-ghost__value {
    margin-top: 2px;
    font-size: clamp(26px, 2.8cqi, 34px);
    font-weight: 300;
    line-height: 1;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    color: #f8fafc;
    background: linear-gradient(135deg, #ffffff 0%, #d8b4fe 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .analytics-ghost__meta {
    margin-top: auto;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: rgba(203, 213, 225, 0.55);
  }

  .analytics-ghost__meta--up {
    margin-top: 2px;
    color: #c084fc;
    font-weight: 600;
    letter-spacing: 0.04em;
  }

  /* Тип: KPI */
  .analytics-ghost__card--kpi {
    justify-content: flex-start;
  }

  /* Тип: столбики */
  .analytics-ghost__bars {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 4px;
    flex: 1;
    min-height: 52px;
    padding: 4px 0 2px;
  }

  .analytics-ghost__bars span {
    flex: 1;
    border-radius: 4px 4px 2px 2px;
    background: linear-gradient(180deg, rgba(192, 132, 252, 0.55) 0%, rgba(124, 58, 237, 0.25) 100%);
    opacity: 0.85;
  }

  .analytics-ghost__bars span:nth-child(1) { height: 38%; }
  .analytics-ghost__bars span:nth-child(2) { height: 62%; }
  .analytics-ghost__bars span:nth-child(3) { height: 48%; }
  .analytics-ghost__bars span:nth-child(4) { height: 88%; }
  .analytics-ghost__bars span:nth-child(5) { height: 55%; }
  .analytics-ghost__bars span:nth-child(6) { height: 72%; }

  /* Тип: дельта */
  .analytics-ghost__pill {
    display: inline-flex;
    align-self: flex-start;
    margin-top: 4px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: #fefce8;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.5) 0%, rgba(192, 132, 252, 0.35) 100%);
    border: 1px solid rgba(233, 213, 255, 0.25);
  }

  /* Тип: кольцо */
  .analytics-ghost__donut {
    position: relative;
    width: min(72px, 20cqi);
    height: min(72px, 20cqi);
    margin: 6px auto 0;
    border-radius: 50%;
    background: conic-gradient(
      #c084fc 0 72%,
      rgba(255, 255, 255, 0.1) 72% 100%
    );
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .analytics-ghost__donut::after {
    content: "";
    position: absolute;
    inset: 11px;
    border-radius: 50%;
    background: rgba(12, 10, 26, 0.92);
    border: 1px solid rgba(192, 132, 252, 0.12);
  }

  .analytics-ghost__donut-val {
    position: relative;
    z-index: 1;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    color: #f1f5f9;
  }

  /* Тип: две метрики */
  .analytics-ghost__card--split {
    gap: 12px;
    justify-content: center;
  }

  .analytics-ghost__split-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }

  .analytics-ghost__split-row:last-of-type {
    padding-bottom: 0;
    border-bottom: none;
  }

  .analytics-ghost__split-k {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(203, 213, 225, 0.55);
  }

  .analytics-ghost__split-v {
    font-size: 18px;
    font-weight: 400;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: rgba(248, 250, 252, 0.95);
  }

  /* Тип: мини-график */
  .analytics-ghost__card--spark {
    gap: 6px;
  }

  .analytics-ghost__spark {
    display: block;
    width: 100%;
    height: auto;
    margin-top: 2px;
    flex: 1;
    min-height: 36px;
    max-height: 48px;
    opacity: 0.9;
  }

  .analytics-ghost__spark-area {
    fill: url(#analyticsGhostSparkFill);
    opacity: 0.35;
  }

  .analytics-ghost__spark-line {
    stroke: url(#analyticsGhostSparkStroke);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
  }
  
  .analytics-bg-beam {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 110%;
    height: 1px;
    margin: 0 auto;
    background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(116, 50, 178, 0.2) 80%,
      rgba(78, 49, 108, 0.7) 50%,
      rgba(116, 50, 178, 0.2) 80%,
      transparent 100%
    );
    z-index: 2;
    pointer-events: none;
  }
  
  /* ---------- HEADLINE ---------- */
  
  .analytics-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 16px;
  }
  
  /* ---------- WAVE ABOVE TITLE ---------- */
  
  .analytics-top-wave {
    position: relative;
    width: 100%;
    max-width: 820px;
    height: 170px;
    margin: 0 auto -42px;
    pointer-events: none;
  }
  
  .analytics-top-wave-halo {
    position: absolute;
    left: 0;
    right: 0;
    top: 38px;
    width: 78%;
    max-width: 660px;
    height: 130px;
    margin: 0 auto;
    background: radial-gradient(
      ellipse at center,
      rgba(148, 110, 220, 0.09) 0%,
      rgba(90, 50, 160, 0.045) 38%,
      transparent 76%
    );
    filter: blur(28px);
    opacity: 0.24;
    animation: analytics-halo-wave 6s ease-in-out infinite;
  }
  
  .analytics-top-wave-svg {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
  }
  
  .analytics-wave-main,
  .analytics-wave-inner,
  .analytics-wave-deep {
    fill: none;
    stroke: url(#analyticsWaveGradientA);
    stroke-linecap: round;
    transform-origin: 50% 50%;
  }
  
  .analytics-wave-deep {
    stroke-width: 40;
    opacity: 0.07;
    filter: url(#analyticsWaveDeepBlur);
    animation: analytics-deep-wave 7.2s ease-in-out infinite;
  }
  
  .analytics-wave-main {
    stroke-width: 9;
    opacity: 0.32;
    filter: url(#analyticsWaveSoftGlow);
    animation: analytics-main-wave 5.2s ease-in-out infinite;
  }
  
  .analytics-wave-inner {
    stroke-width: 5;
    opacity: 0.1;
    filter: url(#analyticsWaveSoftGlow);
    animation: analytics-inner-wave 6.4s ease-in-out infinite;
  }
  
  @keyframes analytics-halo-wave {
    0%, 100% { transform: scaleX(1) scaleY(1); opacity: 0.2; }
    40%      { transform: scaleX(1.06) scaleY(0.94); opacity: 0.28; }
    70%      { transform: scaleX(0.98) scaleY(1.04); opacity: 0.23; }
  }
  @keyframes analytics-main-wave {
    0%, 100% { transform: scaleX(1) scaleY(1); }
    35%      { transform: scaleX(1.015) scaleY(0.97); }
    70%      { transform: scaleX(0.985) scaleY(1.035); }
  }
  @keyframes analytics-inner-wave {
    0%, 100% { transform: translateY(0) scaleX(1); opacity: 0.08; }
    50%      { transform: translateY(5px) scaleX(1.04); opacity: 0.14; }
  }
  @keyframes analytics-deep-wave {
    0%, 100% { transform: translateY(2px) scaleX(1); opacity: 0.06; }
    50%      { transform: translateY(8px) scaleX(1.06); opacity: 0.12; }
  }
  
  /* ---------- TITLE / SUBTITLE (.sonar-section-title — main.css) ---------- */

  .analytics-subtitle {
    font-size: var(--sonar-section-subtitle-fs);
    line-height: var(--sonar-section-subtitle-lh);
    color: rgba(226, 232, 240, 0.66);
    max-width: 720px;
    margin: 18px auto 0;
  }
  
  /* ---------- BENTO GRID ---------- */
  
  .analytics-cards-wrap {
    position: relative;
    z-index: 2;
    max-width: 1180px;
    margin: 48px auto 0;
    padding: 0 16px;
    container-type: inline-size;
  }

  /* ---------- GLASS GRID BACKDROP (за карточками) ---------- */
  .analytics-cards-wrap::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(980px, 92vw);
    height: min(620px, 70vw);
    pointer-events: none;
    z-index: 0;

    /* Сетка квадратов + мягкая подсветка */
    background-image:
      linear-gradient(rgba(192, 132, 252, 0.06) 1px, transparent 1px),
      linear-gradient(90deg, rgba(192, 132, 252, 0.06) 1px, transparent 1px),
      radial-gradient(ellipse at center,
        rgba(140, 95, 220, 0.08) 0%,
        rgba(88, 48, 160, 0.045) 40%,
        transparent 72%);
    background-size: 54px 54px, 54px 54px, 100% 100%;
    background-position: center, center, center;
    background-repeat: repeat, repeat, no-repeat;

    /* Виньетка, чтобы сетка была «по центру» и не лезла в края */
    -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 50%, #000 35%, transparent 78%);
            mask-image: radial-gradient(ellipse 60% 55% at 50% 50%, #000 35%, transparent 78%);
    opacity: 0.5;
  }
  
  .analytics-bento {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    grid-template-rows: auto auto;
    gap: 18px;
    position: relative;
    z-index: 2;
  }
  
  .analytics-card--hero  { grid-column: 1; grid-row: 1 / span 2; }
  .analytics-card--risk  { grid-column: 2; grid-row: 1; }
  .analytics-card--chart { grid-column: 2; grid-row: 2; }
  
  /* ---------- CARD BASE — glass как .billing-card / .story ---------- */
  
  .analytics-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 28px 28px 24px;
    border-radius: 22px;
    background:
      radial-gradient(120% 80% at 0% 0%, rgba(216, 180, 254, 0.12), transparent 50%),
      radial-gradient(80% 60% at 100% 100%, rgba(124, 58, 237, 0.10), transparent 55%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.012) 100%),
      rgba(14, 11, 32, 0.42);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.14),
      inset 0 -1px 0 rgba(255, 255, 255, 0.04),
      inset 1px 0 0 rgba(255, 255, 255, 0.04),
      0 8px 28px -10px rgba(0, 0, 0, 0.55);
    overflow: hidden;
    isolation: isolate;
    transition:
      border-color 0.3s ease,
      box-shadow 0.3s ease;
  }

  .analytics-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(
      160deg,
      rgba(255, 255, 255, 0.30) 0%,
      rgba(255, 255, 255, 0.04) 40%,
      rgba(168, 85, 247, 0.16) 100%
    );
    -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
    opacity: 0.7;
    z-index: 0;
  }

  .analytics-card::after {
    content: "";
    position: absolute;
    top: -18px;
    left: -18px;
    width: 190px;
    height: 120px;
    background: radial-gradient(ellipse at 30% 40%, rgba(255, 255, 255, 0.07), transparent 58%);
    pointer-events: none;
    filter: blur(14px);
    z-index: 0;
  }

  .analytics-section .analytics-card {
    -webkit-backdrop-filter: blur(20px) saturate(140%) !important;
    backdrop-filter: blur(20px) saturate(140%) !important;
  }
  
  /* Контент поверх ::before / ::after */
  .analytics-card > *:not(.analytics-card-specular-skip) {
    position: relative;
    z-index: 1;
  }
  
  .analytics-card:hover {
    border-color: rgba(168, 85, 247, 0.30);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.14),
      0 14px 38px -20px rgba(168, 85, 247, 0.22);
  }
  
  .analytics-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 22px;
  }
  
  .analytics-card-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: rgba(216, 180, 254, 0.85);
    text-transform: uppercase;
  }
  
  .analytics-card-meta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 500;
    color: rgba(226, 232, 240, 0.5);
    white-space: nowrap;
    letter-spacing: 0.04em;
  }
  
  .analytics-card-meta--up {
    color: #c084fc;
    font-weight: 600;
  }
  
  .analytics-card-meta--up svg {
    display: inline-block;
  }
  
  .analytics-live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #c084fc;
    box-shadow: 0 0 8px rgba(192, 132, 252, 0.9);
    animation: analytics-pulse 1.8s ease-in-out infinite;
  }
  
  @keyframes analytics-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.35; transform: scale(0.7); }
  }
  
  /* ---------- HERO CARD: donut + legend ---------- */
  
  .analytics-hero-body {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) 1fr;
    gap: 32px;
    align-items: center;
    flex: 1;
  }
  
  .analytics-donut-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    max-width: 280px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .analytics-donut {
    width: 100%;
    height: 100%;
    display: block;
  }
  
  .analytics-donut-track {
    fill: none;
    stroke: rgba(168, 85, 247, 0.06);
    stroke-width: 6;
  }
  
  /* Все сегменты — оттенки фиолетового, тонкая обводка */
  .analytics-donut-seg {
    fill: none;
    stroke-width: 6;
    stroke-linecap: butt;
    /* Стартовое состояние для анимации обводки */
    stroke-dashoffset: var(--seg-start, 0);
  }
  
  .seg-tone-1 { stroke: #f5f3ff; }   /* самый светлый — главный сегмент */
  .seg-tone-2 { stroke: #e9d5ff; }
  .seg-tone-3 { stroke: #c084fc; }
  .seg-tone-4 { stroke: #a855f7; }
  .seg-tone-5 { stroke: #7c3aed; }
  .seg-tone-6 { stroke: #5b21b6; }   /* самый тёмный */
  
  .analytics-donut-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    text-align: center;
  }
  
  .analytics-donut-value {
    font-size: clamp(36px, 4vw, 52px);
    font-weight: 300;
    color: #ffffff;
    letter-spacing: -0.04em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
  }
  
  .analytics-donut-label {
    margin-top: 8px;
    font-size: 10px;
    font-weight: 500;
    color: rgba(203, 213, 225, 0.45);
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }
  
  /* Legend — тонкая, hairline-разделители, одна цифра доминирует */
  .analytics-legend {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
  }
  
  .analytics-legend li {
    display: grid;
    grid-template-columns: 14px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    font-size: 13px;
    color: rgba(226, 232, 240, 0.78);
    font-weight: 400;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  }
  .analytics-legend li:first-child { padding-top: 0; }
  .analytics-legend li:last-child  { padding-bottom: 0; border-bottom: none; }
  
  .analytics-legend-name {
    letter-spacing: -0.005em;
  }
  
  .analytics-legend-val {
    font-weight: 500;
    color: #ffffff;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    font-size: 13px;
    letter-spacing: -0.01em;
  }
  
  .analytics-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    flex: 0 0 auto;
  }
  
  .dot-tone-1 { background: #f5f3ff; }
  .dot-tone-2 { background: #e9d5ff; }
  .dot-tone-3 { background: #c084fc; }
  .dot-tone-4 { background: #a855f7; }
  .dot-tone-5 { background: #7c3aed; }
  .dot-tone-6 { background: #5b21b6; }
  
  /* ---------- RISK CARD ---------- */
  
  .analytics-risk-body {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
  }
  
  .analytics-risk-figure {
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
    color: #ffffff;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
  }
  
  .analytics-risk-value {
    font-size: 56px;
    font-weight: 300;
    letter-spacing: -0.04em;
    line-height: 1;
    background: linear-gradient(135deg, #ffffff 0%, #c084fc 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  
  .analytics-risk-unit {
    font-size: 22px;
    font-weight: 400;
    color: rgba(192, 132, 252, 0.85);
    margin-left: 2px;
    letter-spacing: -0.02em;
  }
  
  .analytics-risk-caption {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(203, 213, 225, 0.5);
    text-align: right;
    max-width: 110px;
    line-height: 1.4;
  }
  
  /* Bar */
  .analytics-bar {
    position: relative;
    width: 100%;
    height: 4px;
    background: rgba(168, 85, 247, 0.1);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 18px;
  }
  
  .analytics-bar--lg { height: 5px; }
  
  .analytics-bar-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--target-width, 0%);
    background: linear-gradient(90deg, #7c3aed 0%, #c084fc 60%, #f5d0fe 100%);
    border-radius: 999px;
    box-shadow: 0 0 14px rgba(192, 132, 252, 0.5);
    transform: scaleX(0);
    transform-origin: left;
  }
  
  .is-visible .analytics-bar-fill {
    animation: analytics-bar-grow 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.3s forwards;
  }
  
  @keyframes analytics-bar-grow {
    to { transform: scaleX(1); }
  }
  
  .analytics-risk-foot {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
  }
  
  .analytics-risk-cell {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
    column-gap: 8px;
    row-gap: 2px;
    align-items: center;
  }
  
  .analytics-risk-cell-dot {
    grid-row: 1 / span 2;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    align-self: center;
  }
  
  .dot-accent { background: #c084fc; box-shadow: 0 0 8px rgba(192, 132, 252, 0.55); }
  .dot-muted  { background: rgba(255, 255, 255, 0.35); }
  
  .analytics-risk-cell-val {
    font-size: 14px;
    font-weight: 500;
    color: #ffffff;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
  }
  
  .analytics-risk-cell-label {
    grid-column: 2;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(203, 213, 225, 0.5);
  }
  
  /* ---------- CHART CARD ---------- */
  
  .analytics-chart-figure {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 12px;
  }
  
  .analytics-chart-value {
    font-size: 38px;
    font-weight: 300;
    color: #ffffff;
    letter-spacing: -0.04em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    background: linear-gradient(135deg, #ffffff 0%, #c084fc 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  
  .analytics-chart-caption {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(203, 213, 225, 0.5);
  }
  
  .analytics-chart-wrap {
    position: relative;
    width: 100%;
    margin-top: auto;
  }
  
  .analytics-chart {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 320 / 110;
    overflow: visible;
  }
  
  .analytics-chart-grid line {
    stroke: rgba(255, 255, 255, 0.04);
    stroke-width: 1;
  }
  
  .analytics-chart-trend {
    stroke: rgba(226, 232, 240, 0.18);
    stroke-width: 1;
    stroke-dasharray: 3 5;
    fill: none;
  }
  
  .analytics-chart-area {
    fill: url(#analyticsChartFill);
    opacity: 0;
    transition: opacity 0.6s ease 1.2s;
  }
  
  .is-visible .analytics-chart-area {
    opacity: 1;
  }
  
  .analytics-chart-line {
    fill: none;
    stroke: url(#analyticsChartStroke);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    /* фактическая длина пути ≈ 318; берём 320 для стартового скрытия */
    stroke-dasharray: 320;
    stroke-dashoffset: 320;
  }
  
  .analytics-chart-line--glow {
    stroke-width: 5;
    opacity: 0;
    filter: url(#analyticsChartGlow);
  }
  
  .is-visible .analytics-chart-line {
    animation: analytics-line-draw 1.6s cubic-bezier(0.65, 0, 0.35, 1) 0.4s forwards;
  }
  
  .is-visible .analytics-chart-line--glow {
    animation:
      analytics-line-draw 1.6s cubic-bezier(0.65, 0, 0.35, 1) 0.4s forwards,
      analytics-glow-fade 0.8s ease 1.4s forwards;
  }
  
  @keyframes analytics-line-draw {
    to { stroke-dashoffset: 0; }
  }
  
  @keyframes analytics-glow-fade {
    to { opacity: 0.45; }
  }
  
  .analytics-chart-points circle {
    fill: #0f0b1e;
    stroke: #c084fc;
    stroke-width: 1.8;
    opacity: 0;
    transform: scale(0.6);
    transform-origin: center;
    transform-box: fill-box;
  }
  
  .is-visible .analytics-chart-points circle {
    animation: analytics-point-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) var(--pt-delay, 1s) forwards;
  }
  
  @keyframes analytics-point-in {
    to { opacity: 1; transform: scale(1); }
  }
  
  .analytics-chart-points circle.is-last {
    fill: #c084fc;
    stroke: #f5d0fe;
    stroke-width: 1.5;
    filter: drop-shadow(0 0 6px rgba(192, 132, 252, 0.9));
  }
  
  .is-visible .analytics-chart-points circle.is-last {
    animation:
      analytics-point-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) var(--pt-delay, 1s) forwards,
      analytics-point-pulse 2.2s ease-in-out calc(var(--pt-delay, 1s) + 0.4s) infinite;
  }
  
  @keyframes analytics-point-pulse {
    0%, 100% { filter: drop-shadow(0 0 5px rgba(192, 132, 252, 0.85)); }
    50%      { filter: drop-shadow(0 0 11px rgba(192, 132, 252, 1)); }
  }
  
  .analytics-chart-axis {
    display: flex;
    justify-content: space-between;
    margin-top: 12px;
    font-size: 10px;
    letter-spacing: 0.06em;
    color: rgba(203, 213, 225, 0.4);
    font-variant-numeric: tabular-nums;
    text-transform: uppercase;
  }
  
  /* ---------- DONUT REVEAL ANIMATION ---------- */
  
  /* Стартовое состояние: каждый сегмент скрыт через большой dashoffset
     В is-visible переходим к рендерному dashoffset, заданному в HTML */
  .analytics-donut-seg {
    /* Каждый сегмент имеет свой stroke-dashoffset в HTML — это "посадочное" значение.
       Для анимации обводки используем подход через CSS-перем с initial 314 */
    stroke-dasharray: 0 314.16;
    transition:
      stroke-dasharray 0.9s cubic-bezier(0.22, 1, 0.36, 1) var(--seg-delay, 0s);
  }
  
  /* После появления — раскрываем каждый сегмент его реальной длиной из HTML */
  .is-visible .seg-tone-1 { stroke-dasharray: 54.66 314.16; }
  .is-visible .seg-tone-2 { stroke-dasharray: 60.95 314.16; }
  .is-visible .seg-tone-3 { stroke-dasharray: 71.94 314.16; }
  .is-visible .seg-tone-4 { stroke-dasharray: 27.33 314.16; }
  .is-visible .seg-tone-5 { stroke-dasharray: 57.49 314.16; }
  .is-visible .seg-tone-6 { stroke-dasharray: 41.47 314.16; }
  
  /* ---------- INITIAL FADE-IN ---------- */
  
  .analytics-top-wave,
  .analytics-subtitle {
    opacity: 0;
    transform: translateY(16px);
    animation: analytics-fade-in 0.9s ease-out forwards;
  }

  /* Без transform: иначе ломается backdrop-filter у .analytics-card внутри */
  .analytics-cards-wrap {
    opacity: 0;
    animation: analytics-fade-in-opacity 0.9s ease-out forwards;
  }
  
  .analytics-top-wave  { animation-delay: 0.05s; }
  .analytics-subtitle  { animation-delay: 0.32s; }
  .analytics-cards-wrap { animation-delay: 0.5s; }
  
  .analytics-card {
    opacity: 0;
    animation: analytics-fade-in-opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }
  
  .analytics-card--hero  { animation-delay: 0.6s; }
  .analytics-card--risk  { animation-delay: 0.72s; }
  .analytics-card--chart { animation-delay: 0.84s; }
  
  @keyframes analytics-fade-in {
    to { opacity: 1; transform: translateY(0); }
  }

  @keyframes analytics-fade-in-opacity {
    to { opacity: 1; }
  }
  
  /* ---------- ADAPTIVE ---------- */
  
  @media (max-width: 1100px) {
    .analytics-bento {
      grid-template-columns: 1fr;
      grid-template-rows: auto auto auto;
      max-width: 620px;
      margin: 0 auto;
    }
    .analytics-card--hero  { grid-column: 1; grid-row: 1; }
    .analytics-card--risk  { grid-column: 1; grid-row: 2; }
    .analytics-card--chart { grid-column: 1; grid-row: 3; }
  }
  
  @media (max-width: 991px) {
    .analytics-section { padding: 56px 0 96px; }
    .analytics-top-wave { height: 145px; margin-bottom: -32px; }
    .analytics-cards-wrap { margin-top: 40px; }
    .analytics-ghost-metrics { display: none; }
  }
  
  @media (max-width: 768px) {
    .analytics-hero-body {
      grid-template-columns: 1fr;
      gap: 24px;
    }
    .analytics-donut-wrap { max-width: 240px; }
  }
  
  @media (max-width: 575px) {
    .analytics-section { padding: 48px 0 80px; }
  
    .analytics-top-wave {
      width: 110vw;
      height: 120px;
      margin-left: 50%;
      transform: translateX(-50%);
      margin-bottom: -24px;
    }
    .analytics-top-wave-halo {
      top: 28px;
      width: 86vw;
      height: 90px;
      filter: blur(28px);
    }
    .analytics-wave-main { stroke-width: 7; }
    .analytics-wave-inner { stroke-width: 4; }
    .analytics-wave-deep { stroke-width: 30; }
  
    .analytics-subtitle { font-size: 14px; }
    .analytics-cards-wrap { margin-top: 32px; }
  
    .analytics-card {
      padding: 22px 20px;
      border-radius: 18px;
    }
  
    .analytics-donut-wrap { max-width: 200px; }
  
    .analytics-risk-value { font-size: 46px; }
    .analytics-chart-value { font-size: 32px; }
  }

  /* ---------- REDUCED MOTION ---------- */
  
  @media (prefers-reduced-motion: reduce) {
    .analytics-top-wave,
    .analytics-subtitle,
    .analytics-cards-wrap,
    .analytics-card,
    .analytics-top-wave-halo,
    .analytics-wave-main,
    .analytics-wave-inner,
    .analytics-wave-deep,
    .analytics-live-dot,
    .analytics-bar-fill,
    .analytics-donut-seg,
    .analytics-chart-line,
    .analytics-chart-line--glow,
    .analytics-chart-points circle,
    .analytics-chart-points circle.is-last {
      animation: none !important;
      transition: none !important;
    }

    .analytics-ghost,
    .analytics-ghost__card {
      animation: none !important;
    }

    .analytics-ghost {
      opacity: 0.92;
      transform: translate(-50%, -50%) scale(1) rotate(var(--r, 0deg));
    }

    .analytics-ghost__card {
      transform: translate(-50%, -50%);
    }
  
    .analytics-top-wave,
    .analytics-subtitle,
    .analytics-cards-wrap,
    .analytics-card {
      opacity: 1;
      transform: none;
    }
  
    .analytics-bar-fill { transform: scaleX(1); }
    .analytics-chart-line, .analytics-chart-line--glow { stroke-dashoffset: 0; }
    .analytics-chart-line--glow { opacity: 0.45; }
    .analytics-chart-points circle { opacity: 1; transform: scale(1); }
    .analytics-chart-area { opacity: 1; }
  }