:root {
      --bg: #fafafa;
      --card: #ffffff;
      --ink: #0f172a;
      --muted: #5b6475;
      --primary: #e6f4ea;  /* нежно‑зеленый фон */
      --accent: #ffe8f1;   /* пастельно‑розовый */
      --brand: #2c7a7b;    /* зелено‑бирюзовый для акцента */
      --rose: #e91e63;     /* розовый для деталей */
      --ring: rgba(44, 122, 123, 0.25);
      --shadow: 0 8px 24px rgba(16, 24, 40, 0.08);
      --radius: 18px;
    }

    * { box-sizing: border-box; }

    html {
      scroll-behavior: smooth;
    }

    html, body { height: 100%;}
    body {
      min-height: 100%;
      margin: 0;
      font-family: system-ui, -apple-system, "Segoe UI", Roboto, Inter, Arial, sans-serif;
      color: var(--ink);

      background: #ffffff;
      background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgb(247 235 240) 50%, rgba(255, 255, 255, 1) 100%);

      line-height: 1.6;
      -webkit-font-smoothing: antialiased;

      
    }

    a { color: var(--brand); text-decoration: none; }
    a:hover { text-decoration: underline; }

    /* --------- Layout --------- */
    .container { width: min(1120px, 92vw); margin: 0 auto; }

    header.site {
      position: sticky; top: 0; z-index: 40;
      backdrop-filter: saturate(140%) blur(8px);
      background: color-mix(in oklab, #fff 82%, transparent);
      border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    }
    .nav {
      display: flex; align-items: center; justify-content: space-between;
      gap: 16px; padding: 12px 0;
      position: relative;
    }
    .brand { display: flex; align-items: center; gap: 12px; }
    .logo {
      inline-size: 40px; block-size: 40px; border-radius: 50%; display: grid; place-items: center;
      background: linear-gradient(135deg, var(--accent), var(--primary));
      box-shadow: var(--shadow);
      overflow: hidden; /* Обрезаем изображение по кругу */
    }
    .brand h1 { font-size: 18px; margin: 0; letter-spacing: .2px; }
    .brand small { color: var(--muted); display: block; font-size: 12px; }

    .navlinks {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      background: #fff;
      padding: 16px;
      box-shadow: var(--shadow);
      flex-direction: column;
      gap: 8px;
      border-radius: 0 0 var(--radius) var(--radius);
      border: 1px solid rgba(15,23,42,.06);
      border-top: none;
      z-index: 10;
    }
    .navlinks a {
      padding: 8px 12px;
      border-radius: 999px;
      background: #fff;
      border: 1px solid rgba(15,23,42,.06);
      display: block;
      text-align: center;
    }

    .menu-btn { border: none; background: #fff; padding: 10px 12px; border-radius: 12px; box-shadow: var(--shadow); }

    @media (min-width: 920px) {
      .navlinks {
        display: flex;
        position: static;
        flex-direction: row;
        background: none;
        padding: 0;
        box-shadow: none;
        border: none;
        gap: 10px;
        flex-wrap: wrap;
      }
      .navlinks a {
        display: inline-flex;
      }
      .menu-btn {
        display: none;
      }
    }

    /* --------- Hero --------- */
    .hero { padding: 40px 0 16px; }
    .hero .wrap {
      display: grid; gap: 20px; align-items: center;
      grid-template-columns: 1fr; text-align: center;
    }
    .kicker { display: inline-block; padding: 6px 10px; border-radius: 999px; font-size: 12px; color: #0f5132; background: var(--primary); border: 1px solid #d8efe0; }
    .title { font-size: clamp(28px, 5vw, 42px); line-height: 1.15; margin: 8px 0; }
    .subtitle { color: var(--muted); font-size: 16px; }

    .cta-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }
    .btn { display: inline-flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 12px; border: 1px solid rgba(15,23,42,.08); background: #fff; box-shadow: var(--shadow); font-weight: 600; }
    .btn.primary { background: linear-gradient(180deg, #fff, #f7fffb); border-color: #bfe7d0; }

    /* --------- Sections --------- */
    section { padding: 32px 0; scroll-margin-top: 80px; }
    .section-head { display: grid; gap: 8px; margin-bottom: 18px; text-align: center; }
    .section-head h2 { margin: 0; font-size: clamp(22px, 4.2vw, 30px); }
    .section-head p { margin: 0; color: var(--muted); }

    .grid { display: grid; gap: 14px; }
    @media (min-width: 720px) { .grid.cols-2 { grid-template-columns: 1fr 1fr; } }
    @media (min-width: 1000px) { .grid.cols-3 { grid-template-columns: repeat(3, 1fr); } }

    .card {
      background: var(--card);
      border: 1px solid rgba(15,23,42,0.06);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 18px;
    }

    .tag { font-size: 12px; padding: 4px 8px; border-radius: 999px; background: var(--accent); border: 1px solid #ffd2e1; color: #7a2944; display: inline-block; }

    .card h3 { margin: 8px 0 6px; font-size: 20px; }
    .meta { color: var(--muted); font-size: 14px; }
    .list { margin: 10px 0 0 0; padding: 0; list-style: none; }
    .list li { padding-left: 26px; position: relative; margin: 8px 0; }
    .list li::before { content: ""; position: absolute; left: 0; top: 8px; width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #fff, #ffd9e8); border: 1px solid #ffd2e1; box-shadow: inset 0 2px 4px rgba(0,0,0,.04); }

    .pill { display: inline-flex; gap: 8px; align-items: center; padding: 8px 10px; border: 1px dashed rgba(233,30,99,.35); border-radius: 12px; background: #fff7fb; font-size: 13px; }

    .actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
    .action { padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(15,23,42,.08); background: #fff; font-weight: 600; }
    .action.demo { background: linear-gradient(180deg, #fff, #fff0f7); border-color: #ffd2e1; }

    /* Feature rows with icon */
    .row {
      display: grid; gap: 12px; grid-template-columns: 40px 1fr; align-items: start; 
      padding: 10px 0; border-top: 1px dashed rgba(15,23,42,.08);
    }
    .row-myedit {
      display: grid; gap: 12px; grid-template-columns: 40px 1fr; align-items: center; 
      padding: 10px 0; 
    }
    .row:first-of-type { border-top: none; }
    .ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(135deg, var(--primary), #fff); border: 1px solid #d9efe1; }

    /* Collapsible details */
    details { border: 1px solid rgba(15,23,42,.06); border-radius: 12px; padding: 10px 12px; background: #fff; }
    summary { cursor: pointer; font-weight: 600; }

    /* Footer & sticky CTA */
    .cta-sticky {
      position: sticky; bottom: 10px; z-index: 30; display: grid; place-items: center; margin-top: 6px;
    }
    .cta-sticky .btn { margin-top: 40px; padding: 14px 18px; box-shadow: 0 10px 30px rgba(233,30,99,.25); border-color: #ffc6db; background: linear-gradient(180deg, #fff, #ffeaf3); }

    footer { padding: 30px 0 30px; color: var(--muted); text-align: center; }

    /* Subtle line decorations */
    .petal-lines {
      position: absolute; inset: auto 0 0 0; height: 120px; pointer-events: none; opacity: .45;
      background:
        radial-gradient(50% 70px at 10% 50%, #ffd9e8 1px, transparent 2px) repeat-x,
        radial-gradient(50% 70px at 30% 50%, #dff3e6 1px, transparent 2px) repeat-x,
        radial-gradient(50% 70px at 50% 50%, #ffd9e8 1px, transparent 2px) repeat-x,
        radial-gradient(50% 70px at 70% 50%, #dff3e6 1px, transparent 2px) repeat-x,
        radial-gradient(50% 70px at 90% 50%, #ffd9e8 1px, transparent 2px) repeat-x;
      background-size: 160px 120px, 160px 120px, 160px 120px, 160px 120px, 160px 120px;
    }

    /* Utilities */
    .mt-4 { margin-top: 16px; }
    .mb-2 { margin-bottom: 8px; }
    .mb-4 { margin-bottom: 16px; }
    .center { text-align: center; }