:root{
      --u-primary:#f25c2b;
      --u-primary-2:#ff7a47;
      --u-primary-soft:rgba(242,92,43,.08);
      --u-text:#1f2933;
      --u-muted:#6b7280;
      --u-line:#e5e7eb;
      --u-bg:#f5f5f7;
      --u-bg-soft:#ffffff;
      --u-shadow:0 12px 30px rgba(15,23,42,.08);
      --u-radius:18px;
      --u-radius-sm:12px;
      --u-container:1180px;
--accent: #ff6b35;
            --accent-dark: #e65622;
            --accent-light: #ffe1d3;
            --teal: #0d6f70;
            --teal-soft: #f2f7f8;
            --text-main: #333333;
            --text-muted: #777777;
            --bg-page: #f7f7f7;
            --bg-soft: #fafafa;
            --border-color: #e3e3e3;
            --shadow-soft: 0 8px 25px rgba(0, 0, 0, 0.06);
            --radius-lg: 16px;
            --radius-md: 12px;
            --radius-sm: 8px;
    }

    *{box-sizing:border-box;}
    html{scroll-behavior:smooth;}
    html body{
      margin:0;
      font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,"Noto Sans","Helvetica Neue",sans-serif;
      color:var(--u-text);
      background:var(--u-bg);
      line-height:1.5;
    }
.content {
    overflow-x: visible;
}
    a{text-decoration:none;color:inherit;}
    a:hover{color:var(--u-primary);}

    .container{
      max-width:var(--u-container);
      margin:0 auto;
      padding:0 18px;
    }
.btn-primary {
    background: linear-gradient(90deg, var(--accent) 0%, var(--accent-dark) 100%);
    border: none;
    border-radius: 999px;
    padding: 11px 24px;
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    cursor: pointer;
    transition: box-shadow .2s ease, transform .15s ease, opacity .15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    white-space: nowrap;
}
.btn-ghost {
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 500;
    color: #ffffff;
    background: transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.site-header {
            background: #ffffff;
            box-shadow: 0 2px 10px rgba(0,0,0,0.04);
            position: sticky;
            top: 0;
            z-index: 50;
    margin-bottom: 20px;
        }

        .header-top {
            font-size: 13px;
            color: #ffffff;
            background: var(--teal);
        }

        .header-top-inner {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 6px 16px;
        }

        .header-top-left {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
        }

        .header-top-right {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
            align-items: center;
        }

        .header-phone {
            font-weight: 600;
        }

        .header-main {
            padding: 10px 0;
        }

        .header-main-inner {
            display: grid;
            grid-template-columns: auto 1fr auto;
            gap: 18px;
            align-items: center;
        }

        .logo-block {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .logo-mark {
            width: 44px;
            height: 44px;
            border-radius: 14px;
            background: linear-gradient(135deg, var(--accent), var(--accent-dark));
            display: flex;
            align-items: center;
            justify-content: center;
            color: #ffffff;
            font-weight: 700;
            font-size: 18px;
        }

        .logo-text-main {
            font-size: 18px;
            font-weight: 700;
        }

        .logo-text-sub {
            font-size: 12px;
            color: var(--text-muted);
        }

        .main-nav {
            display: flex;
            justify-content: center;
            gap: 18px;
            font-size: 14px;
        }

        .main-nav a {
            color: var(--text-main);
            text-decoration: none;
            padding: 4px 0;
        }

        .main-nav a:hover {
            color: var(--accent-dark);
        }

        .header-actions {
            display: flex;
            gap: 10px;
            align-items: center;
        }

        .header-burger {
            display: none;
            width: 32px;
            height: 32px;
            border-radius: 8px;
            border: 1px solid #e0e0e0;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            background: #fff;
        }
.site-footer {
            margin-top: 26px;
            background: #111827;
            color: #e5e7eb;
            padding: 24px 0 20px;
            font-size: 13px;
        }

        .footer-top {
            display: grid;
            grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
            gap: 22px;
            margin-bottom: 12px;
        }

        .footer-logo {
            display: flex;
            gap: 10px;
            margin-bottom: 8px;
            align-items: center;
        }

        .footer-logo-mark {
            width: 40px;
            height: 40px;
            border-radius: 12px;
            background: linear-gradient(135deg, var(--accent), var(--accent-dark));
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 18px;
        }

        .footer-logo-text-main {
            font-size: 16px;
            font-weight: 700;
        }

        .footer-logo-text-sub {
            font-size: 11px;
            color: #9ca3af;
        }

        .footer-text {
            color: #9ca3af;
        }

        .footer-title {
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 6px;
        }

        .footer-list {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .footer-list li {
            margin-bottom: 4px;
        }

        .footer-list a {
            color: #e5e7eb;
            text-decoration: none;
        }

        .footer-list a:hover {
            color: var(--accent-light);
        }

        .footer-bottom {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            gap: 10px;
            border-top: 1px solid #1f2937;
            padding-top: 10px;
            color: #9ca3af;
            font-size: 12px;
        }
    /* Topbar (упрощённая шапка для макета) */
    .topbar{
      background:#fff;
      border-bottom:1px solid var(--u-line);
    }
    .topbar__row{
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:10px 0;
      gap:12px;
      font-size:14px;
      color:var(--u-muted);
    }
    .topbar__left,
    .topbar__right{
      display:flex;
      align-items:center;
      flex-wrap:wrap;
      gap:10px;
    }
    .chip{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:6px 12px;
      border-radius:999px;
      border:1px solid var(--u-line);
      background:#fff;
      white-space:nowrap;
    }
    .chip__dot{
      width:8px;height:8px;border-radius:50%;
      background:var(--u-primary);
    }

    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      padding:12px 18px;
      border-radius:999px;
      border:1px solid transparent;
      background:var(--u-primary);
      color:#fff;
      font-weight:600;
      font-size:14px;
      cursor:pointer;
      box-shadow:0 8px 20px rgba(242,92,43,.35);
      transition:.15s ease;
      white-space:nowrap;
    }
    .btn:hover{
      background:var(--u-primary-2);
      transform:translateY(-1px);
      box-shadow:0 10px 26px rgba(242,92,43,.45);
    }
    .btn:active{transform:translateY(0);box-shadow:0 4px 12px rgba(15,23,42,.25);}
    .btn--ghost{
      background:#fff;
      color:var(--u-text);
      border-color:var(--u-line);
      box-shadow:none;
    }
    .btn--sm{
      padding:9px 14px;
      font-size:13px;
      box-shadow:none;
    }

    /* Breadcrumbs */
    .breadcrumbs{
      margin:18px 0 6px;
      font-size:13px;
      color:var(--u-muted);
      display:flex;
      flex-wrap:wrap;
      gap:6px;
    }
    .breadcrumbs span{opacity:.9;}
    .breadcrumbs .sep{opacity:.5;}

    /* Общая сетка */
    .page{
      padding:18px 0 48px;
    }
    .grid{
      display:grid;
      grid-template-columns:280px 1fr;
      gap:22px;
      align-items:flex-start;
    }

    /* Левое меню-якоря */
    .side{position:sticky;top:120px;}
    .sidecard{
      border-radius:var(--u-radius);
      border:1px solid var(--u-line);
      background:#fff;
      box-shadow:var(--u-shadow);
      overflow:hidden;
    }
    .sidecard__head{
      padding:14px 16px 10px;
      border-bottom:1px solid var(--u-line);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:8px;
    }
    .sidecard__title{
      font-size:14px;
      font-weight:700;
      text-transform:uppercase;
      letter-spacing:.16em;
      color:var(--u-muted);
    }
    .sidecard__body{padding:10px 10px 12px;}
    .nav{
      display:flex;
      flex-direction:column;
      gap:4px;
    }
    .nav a{
      padding:9px 10px;
      border-radius:12px;
      font-size:14px;
      color:var(--u-muted);
      border:1px solid transparent;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:8px;
      transition:.15s ease;
    }
    .nav a:hover{
      background:rgba(242,92,43,.04);
      border-color:var(--u-primary-soft);
      color:var(--u-text);
    }
    .nav__label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    .nav__badge{
      font-size:11px;
      padding:2px 7px;
      border-radius:999px;
      background:var(--u-primary-soft);
      color:var(--u-primary);
      flex:0 0 auto;
    }

    /* Контент */
    .content{min-width:0;}
    .card{
      border-radius:var(--u-radius);
      border:1px solid var(--u-line);
      background:var(--u-bg-soft);
      box-shadow:var(--u-shadow);
      overflow:hidden;
    }

    .card{margin-bottom:18px;}

    .section{padding:22px 22px 20px;}

    h1{
      margin:0 0 10px;
      font-size:32px;
      line-height:1.15;
      letter-spacing:-.02em;
    }
    h2{
      margin:0 0 10px;
      font-size:22px;
      line-height:1.2;
    }
    h3{
      margin:0 0 8px;
      font-size:16px;
    }
    p{margin:8px 0;color:var(--u-muted);}
    .lead{
      font-size:16px;
      color:var(--u-text);
      margin-top:4px;
    }
    .muted{color:var(--u-muted);}

    .meta{
      margin-top:12px;
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      font-size:12px;
      color:var(--u-muted);
    }
    .meta__pill{
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding:5px 10px;
      border-radius:999px;
      border:1px solid var(--u-line);
      background:#fff;
    }
    .meta__pill b{color:var(--u-text);}

    /* Hero */
    .hero{
      display:grid;
      grid-template-columns:1.1fr .9fr;
      gap:18px;
      align-items:stretch;
      margin-top:8px;
    }
    .hero__image{
      border-radius:var(--u-radius);
      border:1px solid var(--u-line);
      background:
        radial-gradient(900px 260px at 0% 0%,rgba(242,92,43,.14),transparent 55%),
        linear-gradient(135deg,#fff7f3,#ffffff);
      min-height:240px;
      position:relative;
      overflow:hidden;
    }
    .hero__image::before{
      content:"";
      position:absolute;
      inset:18px;
      border-radius:26px;
      border:1px dashed rgba(15,23,42,.08);
    }
    .hero__photo{
      position:absolute;
      inset:22px;
      border-radius:22px;
      background:url("https://stomatologiya-ulybka.ru/wp-content/uploads/2023/02/stom-kabinet.jpg") center/cover no-repeat;
      filter:grayscale(.04);
    }
    .hero__badge{
      position:absolute;
      left:24px;
      bottom:22px;
      padding:8px 12px;
      border-radius:999px;
      background:rgba(255,255,255,.92);
      display:inline-flex;
      align-items:center;
      gap:8px;
      font-size:13px;
      color:var(--u-text);
      box-shadow:0 10px 24px rgba(15,23,42,.18);
    }
    .hero__badge span{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:26px;height:26px;
      border-radius:999px;
      background:var(--u-primary);
      color:#fff;
      font-weight:700;
      font-size:13px;
    }

    .hero__facts{
      display:flex;
      flex-direction:column;
      gap:10px;
    }
    .fact{
      display:flex;
      gap:10px;
      align-items:flex-start;
      padding:10px 11px;
      border-radius:var(--u-radius-sm);
      border:1px solid var(--u-line);
      background:#fff;
    }
    .fact__icon{
      width:32px;height:32px;
      border-radius:14px;
      background:var(--u-primary-soft);
      display:flex;
      align-items:center;
      justify-content:center;
      flex:0 0 auto;
    }
    .fact__icon svg{width:18px;height:18px;fill:var(--u-primary);}
    .fact__title{
      margin:0 0 2px;
      font-size:14px;
      font-weight:700;
      color:var(--u-text);
    }
    .fact__desc{
      margin:0;
      font-size:13px;
    }
    .hero__cta{
      margin-top:4px;
      display:flex;
      flex-wrap:wrap;
      gap:10px;
    }

    /* Миссия и ценности */
    .tags{
      margin-top:10px;
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      font-size:12px;
    }
    .tag{
      padding:5px 10px;
      border-radius:999px;
      border:1px solid var(--u-line);
      background:rgba(249,250,251,.9);
    }

    .values{
      margin-top:12px;
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:12px;
    }
    .value{
      border-radius:var(--u-radius-sm);
      border:1px solid var(--u-line);
      background:#fff;
      padding:11px 12px;
      font-size:14px;
    }
    .value__title{font-weight:700;margin-bottom:4px;color:var(--u-text);}
    .value__text{font-size:13px;color:var(--u-muted);}

    /* История */
    .timeline{
      margin-top:12px;
      display:flex;
      flex-direction:column;
      gap:10px;
    }
    .titem{
      position:relative;
      display:grid;
      grid-template-columns:92px 1fr;
      gap:12px;
      padding:10px 12px;
      border-radius:var(--u-radius-sm);
      border:1px solid var(--u-line);
      background:#fff;
      overflow:hidden;
    }
    .titem::before{
      content:"";
      position:absolute;
      left:34px;
      top:0;
      bottom:0;
      width:2px;
      border-radius:4px;
      background:linear-gradient(var(--u-primary),transparent);
      opacity:.25;
    }
    .tyear{
      font-weight:800;
      font-size:14px;
      color:var(--u-primary);
      position:relative;
      padding-left:26px;
    }
    .tyear::before{
      content:"";
      position:absolute;
      left:0;
      top:7px;
      width:10px;height:10px;
      border-radius:999px;
      background:var(--u-primary);
      box-shadow:0 0 0 6px rgba(242,92,43,.16);
    }
    .ttext{font-size:13px;color:var(--u-muted);}

    /* Карточки врачей / команды */
    .teamGrid{
      margin-top:10px;
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:12px;
    }
    .docCard{
      border-radius:var(--u-radius-sm);
      border:1px solid var(--u-line);
      background:#fff;
      padding:12px;
      display:grid;
      grid-template-columns:auto 1fr;
      gap:10px;
      align-items:center;
    }
    .docCard__ava{
      width:60px;height:100px;
      border-radius:18px;
      border:1px solid var(--u-line);
      background:linear-gradient(135deg,#fff7f3,#ffffff);
      overflow:hidden;
    }
    .docCard__ava img{
      width:100%;height:100%;object-fit:cover;display:block;
    }
    .docCard__name{
      margin:0;
      font-size:14px;
      font-weight:700;
      color:var(--u-text);
    }
    .docCard__role{
      margin:4px 0 0;
      font-size:13px;
      color:var(--u-muted);
    }
    .docCard__meta{
      margin-top:6px;
      font-size:12px;
      color:var(--u-muted);
    }
    .docCard__meta span+span::before{
      content:"•";
      margin:0 4px;
      opacity:.7;
    }
    .docCard__link{
      margin-top:7px;
      font-size:12px;
      color:var(--u-primary);
      font-weight:600;
      display:inline-flex;
    }

    /* Лаборатория и инфраструктура */
    .triple{
      margin-top:12px;
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:12px;
    }
    .feature{
      border-radius:var(--u-radius-sm);
      border:1px solid var(--u-line);
      background:#fff;
      padding:12px 12px 11px;
      font-size:14px;
    }
    .feature h3{font-size:15px;margin:0 0 4px;}
    .feature p{font-size:13px;margin:4px 0 0;}

    /* Принципы качества */
    .bullets{
      margin-top:10px;
      display:grid;
      grid-template-columns:repeat(2,1fr);
      gap:10px;
    }
    .bullet{
      display:flex;
      align-items:flex-start;
      gap:8px;
      padding:10px 11px;
      border-radius:var(--u-radius-sm);
      background:#fff7f3;
      border:1px solid rgba(242,92,43,.18);
      font-size:13px;
      color:var(--u-muted);
    }
    .bullet__ico{
      width:22px;height:22px;
      border-radius:999px;
      background:#fff;
      display:flex;
      align-items:center;
      justify-content:center;
      flex:0 0 auto;
    }
    .bullet__ico svg{width:14px;height:14px;fill:var(--u-primary);}

    /* Результаты и кейсы */
    .cases{
      margin-top:12px;
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:12px;
    }
    .case{
      border-radius:var(--u-radius-sm);
      border:1px solid var(--u-line);
      background:#fff;
      padding:12px;
      font-size:13px;
    }
    .case__label{
      display:inline-flex;
      padding:3px 8px;
      border-radius:999px;
      background:var(--u-primary-soft);
      color:var(--u-primary);
      font-size:11px;
      font-weight:600;
      margin-bottom:6px;
    }
    .case__title{
      margin:0 0 4px;
      font-size:14px;
      font-weight:700;
    }
    .case__meta{
      margin:0 0 4px;
      font-size:12px;
      color:var(--u-muted);
    }
    .case__meta span+span::before{content:"•";margin:0 4px;opacity:.7;}
    .case__desc{margin:0;}

    /* Отзывы (простая карусель scroll-snap) */
    .carousel{
      margin-top:12px;
      display:flex;
      gap:12px;
      overflow:auto;
      padding-bottom:6px;
      scroll-snap-type:x mandatory;
      -webkit-overflow-scrolling:touch;
    }
    .carousel::-webkit-scrollbar{height:8px;}
    .carousel::-webkit-scrollbar-thumb{background:rgba(148,163,184,.8);border-radius:999px;}
    .review{
      scroll-snap-align:start;
      flex:0 0 300px;
      border-radius:var(--u-radius-sm);
      border:1px solid var(--u-line);
      background:#fff;
      padding:12px;
      font-size:13px;
    }
    .review__who{font-weight:700;color:var(--u-text);margin:0 0 2px;}
    .review__meta{margin:0 0 6px;font-size:12px;color:var(--u-muted);}
    .review__text{margin:0;}

    /* Правовая информация */
    .lawKV{
      display:grid;
      grid-template-columns:160px 1fr;
      gap:6px 12px;
      font-size:13px;
      color:var(--u-muted);
    }
    .lawKV b{color:var(--u-text);}
    .lawNote{
      margin-top:12px;
      padding:12px 12px 11px;
      border-radius:var(--u-radius-sm);
      border:1px solid var(--u-line);
      background:linear-gradient(180deg,#ffffff,#f9fafb);
      font-size:12px;
      color:var(--u-muted);
    }

    .lawLinks{
      margin-top:12px;
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      font-size:12px;
    }
    .lawLinks a{
      padding:6px 10px;
      border-radius:999px;
      border:1px dashed var(--u-line);
      background:#fff;
      color:var(--u-primary);
      font-weight:600;
    }

    /* Контакты */
    .contact{
      display:grid;
      grid-template-columns:1.15fr .85fr;
      gap:16px;
      margin-top:8px;
    }
    .contactBox{
      border-radius:var(--u-radius-sm);
      border:1px solid var(--u-line);
      background:#fff;
      padding:14px 14px 12px;
      font-size:14px;
    }
    .kv{
      display:grid;
      grid-template-columns:120px 1fr;
      gap:6px 12px;
      font-size:14px;
      color:var(--u-muted);
    }
    .kv b{color:var(--u-text);}
    .map{
      border-radius:var(--u-radius-sm);
      border:1px dashed rgba(148,163,184,.8);
      background:
        linear-gradient(135deg,#fff7f3,#ffffff);
      min-height:220px;
      position:relative;
      overflow:hidden;
display: flex;
    }
    .map::after{
      content:"Здесь будет карта / виджет Яндекс.Карт";
      position:absolute;
      inset:0;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:13px;
      color:var(--u-muted);
    }

    .footnote p{font-size:12px;}

    /* Адаптивность */
    @media (max-width:1020px){
      .grid{grid-template-columns:1fr;}
      .side{position:static;}
      .hero{grid-template-columns:1fr;}
      .values{grid-template-columns:repeat(2,1fr);}
      .teamGrid{grid-template-columns:repeat(2,1fr);}
      .triple{grid-template-columns:repeat(2,1fr);}
      .bullets{grid-template-columns:1fr;}
      .cases{grid-template-columns:repeat(2,1fr);}
      .contact{grid-template-columns:1fr;}
    }
    @media (max-width:720px){
      .topbar__row{flex-direction:column;align-items:flex-start;}
      .values{grid-template-columns:1fr;}
      .teamGrid{grid-template-columns:1fr;}
      .triple{grid-template-columns:1fr;}
      .cases{grid-template-columns:1fr;}
      .kv{grid-template-columns:1fr;}
      .lawKV{grid-template-columns:1fr;}
      .hero__badge{left:18px;right:auto;}
    }