/* design[57] черновик: новые блоки главной (гигиена на первом месте) */
.v2-sec { padding-top: 104px; }
.v2-h2 { font-size: 46px; line-height: 1.08; font-weight: 800; }
.v2-lead { margin: 0; color: #3F6B64; font-size: 17px; }
.v2-note { margin: 12px 0 0; color: #5E7F78; font-size: 13px; }
.v2-head { display: flex; flex-direction: column; gap: 12px; max-width: 760px; margin-bottom: 32px; }
.v2-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 56px; align-items: center; }
.v2-copy { display: flex; flex-direction: column; gap: 14px; }
.v2-bullets { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 12px; }
.v2-bullets li { position: relative; padding-left: 30px; color: #3F6B64; }
.v2-bullets li b { color: #0E3B35; }
.v2-bullets li::before { content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #E8F8F5; box-shadow: inset 0 0 0 5px #2FAB98; }

/* телефон с отчётом */
.v2-phone-wrap { position: relative; justify-self: center; }
.v2-phone { width: 330px; border-radius: 44px; background: #0E3B35; padding: 12px; box-shadow: 0 30px 60px -30px rgba(14,59,53,.55); position: relative; }
.v2-notch { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); width: 90px; height: 22px; border-radius: 12px; background: #0E3B35; z-index: 2; }
.v2-screen { background: #F7FCFB; border-radius: 34px; padding: 44px 16px 18px; display: grid; gap: 12px; }
.v2-rep-head { display: flex; flex-direction: column; }
.v2-rep-head span { font: 800 19px Manrope, sans-serif; color: #0E3B35; }
.v2-rep-head small { color: #5E7F78; font-size: 12px; }
.v2-score { display: grid; grid-template-columns: 92px 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 12px; background: #FFFFFF; border: 1px solid #DCEFEA; border-radius: 20px; padding: 12px; position: relative; }
.v2-ring { width: 92px; height: 92px; grid-row: 1 / 3; transform: rotate(-90deg); }
.v2-ring-bg, .v2-ring-fg { fill: none; stroke-width: 11; }
.v2-ring-bg { stroke: #E8F8F5; }
.v2-ring-fg { stroke: #147466; stroke-linecap: round; stroke-dasharray: 314.16; stroke-dashoffset: 314.16; transition: stroke-dashoffset 1100ms cubic-bezier(0.23, 1, 0.32, 1); }
.v2-score-num { position: absolute; left: 12px; top: 12px; width: 92px; height: 92px; display: grid; place-content: center; text-align: center; }
.v2-score-num b { font: 800 28px Manrope, sans-serif; color: #0E3B35; line-height: 1; }
.v2-score-num small { font-size: 11px; color: #5E7F78; }
.v2-score-txt { display: grid; }
.v2-score-txt b { color: #147466; }
.v2-score-txt span { font-size: 13px; color: #3F6B64; }
.v2-mini-bars { display: flex; gap: 14px; align-items: flex-end; height: 92px; background: #FFFFFF; border: 1px solid #DCEFEA; border-radius: 20px; padding: 10px 16px; }
.v2-mini-bars div { flex: 1; display: flex; align-items: flex-end; gap: 8px; height: 100%; }
.v2-mini-bars i { display: block; width: 34px; height: var(--h); border-radius: 8px 8px 4px 4px; transform-origin: bottom; }
.v2-mini-bars i.bad { background: #E0487F; } .v2-mini-bars i.ok { background: #2FAB98; }
.v2-mini-bars span { font: 700 14px Manrope, sans-serif; color: #0E3B35; line-height: 1.1; }
.v2-mini-bars small { font: 400 11px "Golos Text", sans-serif; color: #5E7F78; }
.v2-rep-block { background: #FFFFFF; border: 1px solid #DCEFEA; border-radius: 20px; padding: 12px; }
.v2-rep-title { font-weight: 700; font-size: 14px; margin-bottom: 8px; }
.v2-brush { display: grid; gap: 6px; }
.v2-jaw { display: flex; align-items: center; justify-content: center; }
.v2-tooth { width: 11px; height: 19px; border-radius: 4px; background: #EEF6F4; border: 1px solid #CFE6E0; font-size: 6.5px; color: #5E7F78; display: grid; place-items: center; flex: 0 0 auto; }
.v2-tooth.implant { background: #DCEBFA; border-color: #9EC3EA; }
.v2-tooth.missing { background: transparent; border-style: dashed; color: #B5CFC9; }
.v2-gap { width: 4px; height: 12px; display: grid; place-items: center; flex: 0 0 auto; position: relative; }
.v2-gap i { width: 8px; height: 8px; border-radius: 50%; position: absolute; z-index: 1; transform: scale(0); transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1); }
.v2-gap i.floss { width: 2px; height: 12px; border-radius: 1px; background: #9FB8B2; }
.v2-gap i.bleed { box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 3.5px #E0487F; }
.v2-brush.in .v2-gap i { transform: scale(1); }
.v2-legend { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 8px; font-size: 10px; color: #5E7F78; }
.v2-legend span { display: inline-flex; align-items: center; gap: 4px; }
.v2-legend i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.v2-legend i.v2-floss { width: 2px; height: 10px; border-radius: 1px; background: #9FB8B2; }
.v2-legend i.v2-bleed { background: #FFFFFF; box-shadow: 0 0 0 1.5px #E0487F; }
.v2-next { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: #3F6B64; }
.v2-next b { color: #147466; }
.v2-float-qr { left: -130px; bottom: -56px; display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; }
.v2-qr { width: 52px; height: 52px; border-radius: 8px; background:
  conic-gradient(from 90deg at 30% 30%, #0E3B35 25%, transparent 0) 0 0 / 13px 13px,
  linear-gradient(#0E3B35, #0E3B35) 4px 4px / 14px 14px no-repeat,
  linear-gradient(#0E3B35, #0E3B35) 34px 4px / 14px 14px no-repeat,
  linear-gradient(#0E3B35, #0E3B35) 4px 34px / 14px 14px no-repeat, #FFFFFF; border: 3px solid #FFFFFF; outline: 1px solid #DCEFEA; }

/* сводка руководителя */
.v2-dash { padding: 24px; }
.v2-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.v2-kpi { background: #F7FCFB; border: 1px solid #DCEFEA; border-radius: 18px; padding: 14px 16px; display: grid; gap: 2px; }
.v2-kpi small { color: #5E7F78; font-size: 13px; }
.v2-kpi b { font: 800 30px Manrope, sans-serif; color: #0E3B35; line-height: 1.1; font-variant-numeric: tabular-nums; }
.v2-kpi b small { font: 600 14px "Golos Text", sans-serif; }
.v2-kpi em { font-style: normal; font-size: 13px; color: #3F6B64; }
.v2-kpi em.up { color: #147466; font-weight: 600; }
.v2-kpi.attn { background: #FDEBF1; border-color: #F6C9D9; }
.v2-kpi.attn b { color: #A3204E; }
.v2-dash-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.v2-panel { background: #FFFFFF; border: 1px solid #DCEFEA; border-radius: 18px; padding: 16px 18px; }
.v2-panel h3 { margin: 0 0 12px; font: 700 16px Manrope, sans-serif; }
.v2-wide { grid-column: 1 / -1; }
.v2-weeks { display: flex; align-items: flex-end; gap: 14px; height: 150px; padding-bottom: 20px; position: relative; }
.v2-weeks div { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; }
.v2-weeks i { display: block; width: 70%; max-width: 44px; height: var(--h); background: #CFE6D8; border-radius: 8px 8px 4px 4px; position: relative; transform-origin: bottom; }
.v2-weeks u { position: absolute; left: 0; right: 0; bottom: 0; height: var(--h); background: #147466; border-radius: 6px 6px 4px 4px; }
.v2-weeks span { position: absolute; bottom: -20px; font-size: 11px; color: #5E7F78; }
.v2-legend2 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 10px 0 0; font-size: 12px; color: #5E7F78; }
.v2-legend2 i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.v2-legend2 i.a { background: #CFE6D8; } .v2-legend2 i.b { background: #147466; }
.v2-legend2 i.ok, .v2-row i.ok, .v2-stack i.ok { background: #3f9a6e; }
.v2-legend2 i.mid, .v2-row i.mid, .v2-stack i.mid { background: #e2a33a; }
.v2-legend2 i.bad, .v2-stack i.bad { background: #c9573a; }
.v2-stack { display: flex; height: 18px; border-radius: 999px; overflow: hidden; background: #EEF6F4; }
.v2-stack i { width: var(--w); }
.v2-progress { display: flex; align-items: baseline; gap: 4px; margin-top: 18px; font: 800 40px Manrope, sans-serif; color: #147466; }
.v2-progress b { font: inherit; }
.v2-progress span { font: 400 14px "Golos Text", sans-serif; color: #3F6B64; margin-left: 10px; max-width: 220px; }
.v2-row { display: grid; grid-template-columns: minmax(0, 220px) 1fr 44px; gap: 12px; align-items: center; font-size: 14px; margin: 9px 0; }
.v2-row div { height: 10px; border-radius: 999px; background: #EEF6F4; overflow: hidden; }
.v2-row i { display: block; height: 100%; width: var(--w); border-radius: 999px; transform-origin: left; }
.v2-row b { text-align: right; font-variant-numeric: tabular-nums; }

/* выгода клинике */
.v2-benefits { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.v2-benefits .card { display: flex; flex-direction: column; gap: 10px; }
.v2-benefits h3 { font-size: 20px; font-weight: 700; }
.v2-benefits p { margin: 0; color: #3F6B64; font-size: 15px; }
.v2-ic { width: 44px; height: 44px; border-radius: 14px; background: #E8F8F5; display: grid; place-items: center; }
.v2-ic svg { width: 22px; height: 22px; fill: none; stroke: #147466; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* появление: столбцы и полосы растут, когда блок на экране */
.v2-anim .v2-weeks i, .v2-anim .v2-mini-bars i { transform: scaleY(0); transition: transform 900ms cubic-bezier(0.23, 1, 0.32, 1); }
.v2-anim .v2-row i { transform: scaleX(0); transition: transform 900ms cubic-bezier(0.23, 1, 0.32, 1); }
.v2-anim .v2-stack { clip-path: inset(0 100% 0 0 round 999px); transition: clip-path 1000ms cubic-bezier(0.23, 1, 0.32, 1); }
.v2-anim.in .v2-weeks i, .v2-anim.in .v2-mini-bars i { transform: scaleY(1); }
.v2-anim.in .v2-row i { transform: scaleX(1); }
.v2-anim.in .v2-stack { clip-path: inset(0 0 0 0 round 999px); }

@media (max-width: 1000px) {
  .v2-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v2-kpis .attn { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .v2-h2 { font-size: 32px !important; }
  .v2-split { grid-template-columns: 1fr; gap: 32px; }
  .v2-float-qr { display: none; }
  .v2-dash-grid { grid-template-columns: 1fr; }
  .v2-row { grid-template-columns: minmax(0, 1fr) 90px 40px; }
  .v2-benefits { grid-template-columns: 1fr; }
}
@media (max-width: 380px) { .v2-phone { width: 300px; } .v2-tooth { width: 13px; } }
@media (prefers-reduced-motion: reduce) {
  .v2-anim .v2-weeks i, .v2-anim .v2-mini-bars i, .v2-anim .v2-row i { transform: none; transition: none; }
  .v2-anim .v2-stack { clip-path: none; transition: none; }
  .v2-ring-fg, .v2-gap i { transition: none; }
}

/* узкий экран: карта ёршиков помещается в телефон */
.v2-screen { grid-template-columns: minmax(0, 1fr); }
.v2-phone { max-width: 100%; box-sizing: border-box; }
@media (max-width: 440px) {
  .v2-phone { width: 100%; }
  .v2-tooth { width: 11px; height: 18px; font-size: 6px; border-radius: 4px; }
  .v2-gap { width: 4px; }
  .v2-gap i { width: 7px; height: 7px; }
}

/* зубы: рамка внутри размера — ряд из 16 зубов помещается в экран телефона */
.v2-tooth { box-sizing: border-box; }