/* cyrillic-ext */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("fonts/21921106-5ce5-4e72-af2d-3f93160a919d.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("fonts/3b119338-c5fa-4f38-9fd8-bd9df96268a3.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("fonts/4f72fe1d-f341-469d-a953-d3e19f284b22.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("fonts/994edc30-e902-48a2-a915-966799abe55f.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/32ea121f-e810-4406-a450-273c848c9793.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/30b350dd-cd4f-4b81-bf7e-2f9e395219c4.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/eb4f4c5a-7483-4b38-82eb-e60c7c51f276.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/0bfe2bf1-ded2-4691-bf7d-fef9ab7f8741.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/a3153616-c822-4804-910d-5dde3b3c03bc.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/d5216a26-1115-4c79-971d-184d116e6073.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/32ea121f-e810-4406-a450-273c848c9793.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/30b350dd-cd4f-4b81-bf7e-2f9e395219c4.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/eb4f4c5a-7483-4b38-82eb-e60c7c51f276.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/0bfe2bf1-ded2-4691-bf7d-fef9ab7f8741.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/a3153616-c822-4804-910d-5dde3b3c03bc.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/d5216a26-1115-4c79-971d-184d116e6073.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/32ea121f-e810-4406-a450-273c848c9793.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/30b350dd-cd4f-4b81-bf7e-2f9e395219c4.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/eb4f4c5a-7483-4b38-82eb-e60c7c51f276.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/0bfe2bf1-ded2-4691-bf7d-fef9ab7f8741.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/a3153616-c822-4804-910d-5dde3b3c03bc.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/d5216a26-1115-4c79-971d-184d116e6073.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/bc1a27cb-1969-426d-a4d0-71dc4d561e49.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/45e93626-0f8d-4685-9adb-fd149d604031.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/de70aa40-2afc-4862-bf62-0436080206bf.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/fc256957-d506-4e35-a03a-7eed970b0435.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/a486863e-2ffb-4fda-bb8b-f1ff5259008e.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/bc1a27cb-1969-426d-a4d0-71dc4d561e49.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/45e93626-0f8d-4685-9adb-fd149d604031.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/de70aa40-2afc-4862-bf62-0436080206bf.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/fc256957-d506-4e35-a03a-7eed970b0435.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/a486863e-2ffb-4fda-bb8b-f1ff5259008e.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/bc1a27cb-1969-426d-a4d0-71dc4d561e49.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/45e93626-0f8d-4685-9adb-fd149d604031.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/de70aa40-2afc-4862-bf62-0436080206bf.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/fc256957-d506-4e35-a03a-7eed970b0435.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/a486863e-2ffb-4fda-bb8b-f1ff5259008e.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/bc1a27cb-1969-426d-a4d0-71dc4d561e49.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/45e93626-0f8d-4685-9adb-fd149d604031.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/de70aa40-2afc-4862-bf62-0436080206bf.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/fc256957-d506-4e35-a03a-7eed970b0435.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/a486863e-2ffb-4fda-bb8b-f1ff5259008e.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ════════════════════════════════════════════════════════════════
   PLEXY GATE — design system v2 · «Витрина»
   ────────────────────────────────────────────────────────────────
   GROUND      light neutral canvas; sections are big rounded cards:
               white / ink / one lime card per page
   PALETTE     canvas #f2f1ee · card #fff · ink #1b1b17 · lime accent
               (ink text on lime; lime never as text on white)
   TYPE        Unbounded (display, Cyrillic) + Golos Text (body)
               + JetBrains Mono (labels) — kept from v1
   RADII       cards 32 · tiles 20 · fields 14 · buttons pill
   SPACING     8px base · card padding 64 · card gap 16 · section 96
   COMPONENTS  pill buttons · filled rounded fields · chips ·
               floating tiles with slight rotation
   MOTIF       the waypoint square survives the rebrand: bullets,
               markers, route lines inside dark cards.
   ════════════════════════════════════════════════════════════════ */

.pg2 {
  /* surfaces */
  --canvas:  oklch(0.952 0.004 95);
  --card:    oklch(0.995 0.002 95);
  --field:   oklch(0.945 0.005 95);
  --ink:     oklch(0.225 0.008 95);
  --ink-2:   oklch(0.29 0.009 95);
  --line:    oklch(0.225 0.008 95 / 0.10);
  --line-2:  oklch(0.225 0.008 95 / 0.22);

  /* text on light */
  --t-1: oklch(0.225 0.008 95);
  --t-2: oklch(0.45 0.008 95);
  --t-3: oklch(0.58 0.008 95);

  /* text on ink */
  --w-1: oklch(0.97 0.003 95);
  --w-2: oklch(0.78 0.006 95);
  --w-3: oklch(0.60 0.007 95);
  --wline:   oklch(0.97 0.01 95 / 0.14);

  /* accent — lime, always with ink text */
  --lime:      oklch(0.88 0.185 122);
  --lime-deep: oklch(0.80 0.20 124);
  --lime-soft: oklch(0.88 0.185 122 / 0.25);

  /* type */
  --disp: "Unbounded", "Golos Text", sans-serif;
  --sans: "Golos Text", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;

  /* radii */
  --r-card: 32px;
  --r-tile: 20px;
  --r-field: 14px;

  background: var(--canvas);
  color: var(--t-1);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  padding: 16px;
}

.pg2 *, .pg2 *::before, .pg2 *::after { box-sizing: border-box; }
.pg2 ::selection { background: var(--lime); color: var(--ink); }
.pg2 h1, .pg2 h2, .pg2 h3, .pg2 h4, .pg2 p, .pg2 ul, .pg2 ol, .pg2 figure { margin: 0; }
.pg2 ul, .pg2 ol { padding: 0; list-style: none; }
.pg2 a { color: inherit; text-decoration: none; }
.pg2 img, .pg2 svg { display: block; }

/* ── display type ─────────────────────────────────────────────── */
.pg2-disp {
  font-family: var(--disp);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.06;
}
.pg2 h2.pg2-disp { font-size: 44px; }

/* ── atoms ────────────────────────────────────────────────────── */

/* waypoint — the surviving motif */
.pg2-wp { display: inline-block; width: 8px; height: 8px; background: var(--lime-deep); flex: none; }
.pg2-wp--ink { background: var(--ink); }
.pg2-wp--ghost { background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); }

.pg2-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--t-2);
}

/* pill buttons */
.pg2-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 17px 30px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--ink);
  color: var(--w-1);
  font-family: var(--sans);
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, transform .12s ease;
}
.pg2-btn:hover { background: var(--ink-2); }
.pg2-btn:active { transform: scale(0.985); }
.pg2-btn .pg2-arrow { transition: transform .18s ease; }
.pg2-btn:hover .pg2-arrow { transform: translateX(3px); }

.pg2 a.pg2-btn, .pg2 button.pg2-btn { color: var(--w-1); }
.pg2 a.pg2-btn.pg2-btn--lime, .pg2 button.pg2-btn.pg2-btn--lime { color: var(--ink); }
.pg2 a.pg2-btn.pg2-btn--ghost, .pg2 button.pg2-btn.pg2-btn--ghost { color: var(--t-1); }
.pg2 a.pg2-btn.pg2-btn--white, .pg2 button.pg2-btn.pg2-btn--white { color: var(--ink); }

.pg2-btn--lime { background: var(--lime); color: var(--ink); }
.pg2-btn--lime:hover { background: var(--lime-deep); }
.pg2-btn--ghost { background: transparent; border-color: var(--line-2); color: var(--t-1); }
.pg2-btn--ghost:hover { background: transparent; border-color: var(--ink); }
.pg2-btn--white { background: var(--card); color: var(--ink); }
.pg2-btn--white:hover { background: var(--field); }

/* chips */
.pg2-chip {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 10px 18px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  color: var(--t-2);
  background: transparent;
  cursor: pointer;
  transition: all .15s ease;
}
.pg2-chip:hover { border-color: var(--ink); color: var(--t-1); }
.pg2-chip[data-on="1"] { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.pg2-chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* fields — filled, rounded */
.pg2-field { display: flex; flex-direction: column; gap: 9px; }
.pg2-field > .fl {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--t-3);
  padding-left: 4px;
}
.pg2-input {
  width: 100%;
  background: var(--field);
  border: 1px solid transparent;
  border-radius: var(--r-field);
  padding: 16px 18px;
  font-family: var(--sans);
  font-size: 16px;
  color: var(--t-1);
  outline: none;
  transition: border-color .15s ease, background .15s ease;
}
.pg2-input::placeholder { color: var(--t-3); }
.pg2-input:focus { border-color: var(--ink); background: var(--card); }

/* section cards */
.pg2-card {
  background: var(--card);
  border-radius: var(--r-card);
  padding: 72px;
}
.pg2-card--ink { background: var(--ink); color: var(--w-1); }
.pg2-card--lime { background: var(--lime); color: var(--ink); }
.pg2-stack { display: flex; flex-direction: column; gap: 16px; }

/* wordmark */
.pg2-wm {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--disp);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.01em;
  line-height: 1;
}
.pg2-wm em { font-style: normal; font-weight: 400; opacity: 0.55; }
.pg2-wm .pg2-wp { width: 7px; height: 7px; }

/* floating tile */
.pg2-tile {
  background: var(--card);
  border-radius: var(--r-tile);
  border: 1px solid var(--line);
  box-shadow: 0 24px 48px -24px oklch(0.225 0.008 95 / 0.18), 0 2px 8px oklch(0.225 0.008 95 / 0.05);
}

/* image placeholder — striped, with mono explainer */
.pg2-ph {
  position: relative;
  border-radius: var(--r-tile);
  background: repeating-linear-gradient(-45deg, var(--field) 0 14px, oklch(0.91 0.006 95) 14px 28px);
  overflow: hidden;
}
.pg2-ph .phx {
  position: absolute;
  inset: auto 16px 14px auto;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--t-3);
  background: var(--card);
  border-radius: 999px;
  padding: 6px 12px;
}


/* ── Landing v2 — «Витрина» layout ────────────────────────────────
   Light canvas, rounded section-cards, bento mosaic, floating tiles. */

/* plexy logo */
.l2-logo { height: 30px; width: auto; filter: brightness(0); }
.l2-logo--inv { filter: brightness(0) invert(1); }
.l2-wm { gap: 6px; }

/* GATE — lime sticker */
.l2-gate {
  font-style: normal;
  font-family: var(--disp);
  font-weight: 700;
  font-size: 21px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--lime);
  border-radius: 10px;
  padding: 7px 14px 6px;
  display: inline-block;
  transform: rotate(-2deg) translateY(-1px);
  opacity: 1;
}
.pg2-wm .l2-gate, .l2-foot-wm .l2-gate { opacity: 1; }
.l2-gate--lg { font-size: 26px; padding: 10px 18px 9px; border-radius: 12px; }

/* nav — floating pill bar */
.l2-nav {
  display: flex;
  align-items: center;
  gap: 40px;
  background: var(--card);
  border-radius: 999px;
  padding: 12px 14px 12px 28px;
  margin-bottom: 16px;
}
.l2-nav .links {
  display: flex;
  gap: 30px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--t-2);
  margin-left: 24px;
}
.l2-nav .links a { white-space: nowrap; transition: color .15s ease; }
.l2-nav .links a:hover { color: var(--t-1); }
.l2-nav .right { margin-left: auto; display: flex; align-items: center; gap: 22px; }
.l2-nav .phone { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.04em; color: var(--t-2); white-space: nowrap; }
.l2-nav .pg2-btn { padding: 13px 24px; font-size: 14.5px; }

/* hero card */
.l2-hero {
  display: grid;
  grid-template-columns: 1fr 460px;
  gap: 64px;
  align-items: center;
  padding: 88px 80px;
  position: relative;
  overflow: hidden;
}
.l2-hero h1 {
  margin-top: 28px;
  font-family: var(--disp);
  font-size: 54px;
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.l2-hero h1 .hl {
  background: var(--lime);
  border-radius: 10px;
  padding: 0 12px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.l2-hero .lead { margin-top: 28px; font-size: 18px; line-height: 1.65; color: var(--t-2); max-width: 50ch; }
.l2-hero .cta { margin-top: 40px; display: flex; gap: 12px; }
.l2-hero .meta {
  margin-top: 56px;
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
}
.l2-hero .meta span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--t-3);
}

/* floating tile cluster */
.l2-float { position: relative; height: 480px; }
.l2-float .pg2-tile { position: absolute; padding: 22px 24px; }
.l2-float .th {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--t-3);
  margin-bottom: 16px;
}
.l2-float .t-status { top: 24px; left: 0; width: 320px; transform: rotate(-3deg); z-index: 2; }
.l2-float .t-status li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  font-size: 14px;
  font-weight: 500;
}
.l2-float .t-status li .st { margin-left: auto; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--t-3); }
.l2-float .t-status li[data-s="run"] .st { color: var(--lime-deep); }
.l2-float .t-status li .pg2-wp { width: 7px; height: 7px; }
.l2-float .t-status li[data-s="ok"] .pg2-wp { background: var(--ink); }
.l2-float .t-status li[data-s="run"] .pg2-wp { background: var(--lime-deep); }

.l2-float .t-partners {
  top: 230px; right: 0; width: 300px;
  transform: rotate(2.5deg);
  z-index: 3;
}
.l2-float .t-partners .pl { display: flex; flex-wrap: wrap; gap: 8px; }
.l2-float .t-partners .pl span {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 8px 14px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  color: var(--t-2);
}

.l2-float .t-payout {
  top: 392px; left: 32px; width: 280px;
  transform: rotate(-1.5deg);
  background: var(--ink);
  color: var(--w-1);
  border-color: transparent;
  z-index: 4;
}
.l2-float .t-payout .th { color: var(--w-3); margin-bottom: 10px; }
.l2-float .t-payout .pv { font-family: var(--mono); font-size: 13px; letter-spacing: 0.03em; color: var(--w-2); display: flex; align-items: center; gap: 10px; }
.l2-float .t-payout .pv b { color: var(--lime); font-weight: 500; }

/* диаграммы вместо плейсхолдеров */
.l2-art { background: var(--field); display: flex; }
.l2-diagram {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--field);
  border-radius: var(--r-tile);
  padding: 24px 28px 26px;
}
.l2-diagram .dh {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--t-3);
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.l2-diagram .dh .live { color: var(--lime-deep); font-weight: 700; }
.l2-diagram svg { flex: 1; width: 100%; height: auto; margin-top: 8px; }

.d-steps { flex: 1; display: flex; flex-direction: column; justify-content: space-evenly; position: relative; margin-top: 6px; }
.d-steps::before { content: ""; position: absolute; left: 5px; top: 18px; bottom: 18px; width: 1.5px; background: var(--line-2); }
.d-steps li {
  position: relative;
  display: grid;
  grid-template-columns: 12px 24px minmax(0, 1fr) auto 72px;
  gap: 10px;
  align-items: center;
  padding: 10px 0;
}
.d-steps .dn {
  position: relative;
  z-index: 1;
  width: 12px; height: 12px;
  background: var(--card);
  border: 1.5px solid var(--t-2);
  flex: none;
}
.d-steps li[data-s="done"] .dn { background: var(--ink); border-color: var(--ink); }
.d-steps li[data-s="run"] .dn { background: var(--lime); border-color: var(--lime-deep); }
.d-steps .dnum { font-family: var(--mono); font-size: 11px; color: var(--t-3); }
.d-steps .dl { font-size: 14px; font-weight: 500; line-height: 1.3; }
.d-steps li[data-s="queue"] .dl { color: var(--t-2); font-weight: 400; }
.d-steps .dt { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--t-3); white-space: nowrap; }
.d-steps .ds {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--t-2);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  padding: 4px 0;
  text-align: center;
  white-space: nowrap;
}
.d-steps li[data-s="run"] .ds { background: var(--lime); border-color: var(--lime); color: var(--ink); font-weight: 700; }
.d-steps li[data-s="done"] .ds { color: var(--t-3); }

/* generic card head */
.l2-head { max-width: 760px; }
.l2-head h2 { margin-top: 24px; font-family: var(--disp); font-size: 40px; font-weight: 600; line-height: 1.1; letter-spacing: -0.015em; text-wrap: balance; }
.l2-head .sub { margin-top: 20px; font-size: 17px; line-height: 1.65; color: var(--t-2); max-width: 56ch; }
.pg2-card--ink .l2-head .sub { color: var(--w-2); }
.pg2-card--ink .pg2-label { color: var(--w-3); }

/* продукт — асимметричный сплит: текст слева (sticky), ступенчатые тайлы справа */
.l2-what2 { display: grid; grid-template-columns: 5fr 7fr; gap: 80px; align-items: start; padding-bottom: 128px; }
.l2-what2-copy { position: sticky; top: 32px; display: flex; flex-direction: column; align-items: flex-start; }
.l2-what2-copy h2 { margin-top: 24px; font-family: var(--disp); font-size: 40px; font-weight: 600; line-height: 1.1; letter-spacing: -0.015em; text-wrap: balance; }
.l2-what2-copy .sub { margin-top: 20px; font-size: 17px; line-height: 1.65; color: var(--w-2); max-width: 46ch; }
.l2-what2-copy .pg2-label { color: var(--w-3); }
.l2-what2-note {
  margin-top: 36px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--lime);
  border: 1px solid var(--wline);
  border-radius: 999px;
  padding: 9px 16px;
}
.l2-what2 .l2-what { margin-top: 0; }
.l2-what2 .l2-what li:nth-child(even) { transform: translateY(56px); }
.l2-what2 .l2-what h3 { margin-top: 56px; }

/* продукт — ink card, rounded inner tiles */
.l2-what { margin-top: 56px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.l2-what li { background: var(--ink-2); border-radius: var(--r-tile); padding: 32px 34px 36px; }
.l2-what .k { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--lime); display: inline-flex; align-items: center; gap: 10px; }
.l2-what h3 { margin-top: 44px; font-size: 21px; font-weight: 600; letter-spacing: -0.015em; }
.l2-what p { margin-top: 10px; font-size: 15px; line-height: 1.6; color: var(--w-2); }

/* задачи — split rows with placeholder art */
.l2-tasks-row { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; margin-top: 64px; }
.l2-tasks-row:first-of-type { margin-top: 56px; }
.l2-tasks-row .art { height: auto; min-height: 380px; align-self: stretch; }
.l2-tasks-row > ol { display: flex; flex-direction: column; }
.l2-tasks-row > ol > li { display: flex; gap: 22px; padding: 24px 0; border-top: 1px solid var(--line); }
.l2-tasks-row > ol > li:first-child { border-top: 0; padding-top: 0; }
.l2-tasks-row > ol .n {
  flex: none;
  width: 44px; height: 44px;
  border-radius: 999px;
  background: var(--field);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--t-2);
}
.l2-tasks-row > ol h3 { font-size: 19px; font-weight: 600; letter-spacing: -0.015em; }
.l2-tasks-row > ol p { margin-top: 7px; font-size: 15px; line-height: 1.6; color: var(--t-2); max-width: 46ch; }

/* для кого — naked bento mosaic */
.l2-seg-head { padding: 24px 24px 36px; }
.l2-bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.l2-bento li {
  background: var(--card);
  border-radius: var(--r-tile);
  padding: 30px 32px;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
}
.l2-bento li.w2 { grid-column: span 2; }
.l2-bento li.lime { background: var(--lime); }
.l2-bento li.ink { background: var(--ink); color: var(--w-1); }
.l2-bento .en { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--t-3); }
.l2-bento li.ink .en { color: var(--w-3); }
.l2-bento li.lime .en { color: oklch(0.42 0.09 124); }
.l2-bento .ru { font-size: 20px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.35; text-wrap: balance; }
.l2-bento li.w2 .ru { font-size: 24px; max-width: 22ch; }

/* процесс — ink card, horizontal route */
.l2-steps { margin-top: 72px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 40px; position: relative; }
.l2-steps::before { content: ""; position: absolute; top: 21px; left: 22px; right: 64px; height: 1px; background: var(--wline); }
.l2-steps li { position: relative; }
.l2-steps .n {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 999px;
  background: var(--ink-2);
  border: 1px solid var(--wline);
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--w-2);
}
.l2-steps li[data-live="1"] .n { background: var(--lime); border-color: var(--lime); color: var(--ink); font-weight: 700; }
.l2-steps h3 { margin-top: 24px; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
.l2-steps p { margin-top: 10px; font-size: 14px; line-height: 1.55; color: var(--w-2); }
.l2-steps .dur {
  display: inline-block;
  margin-top: 16px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--w-3);
  border: 1px solid var(--wline);
  border-radius: 999px;
  padding: 6px 12px;
}

/* почему — white card, head left / rows right */
.l2-why { display: grid; grid-template-columns: 5fr 7fr; gap: 80px; align-items: start; }
.l2-why-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; }
.l2-why-list li { display: flex; gap: 16px; padding: 22px 0; border-top: 1px solid var(--line); }
.l2-why-list li:nth-child(-n+2) { border-top: 0; padding-top: 6px; }
.l2-why-list .pg2-wp { margin-top: 7px; }
.l2-why-list h3 { font-size: 16.5px; font-weight: 600; letter-spacing: -0.01em; }
.l2-why-list p { margin-top: 6px; font-size: 14px; line-height: 1.55; color: var(--t-2); }

/* compliance — the lime card */
.l2-comp { display: grid; grid-template-columns: 6fr 5fr; gap: 88px; align-items: start; }
.l2-comp .pg2-label { color: oklch(0.40 0.09 124); }
.l2-comp h2 { margin-top: 24px; font-family: var(--disp); font-size: 38px; font-weight: 600; line-height: 1.1; letter-spacing: -0.015em; text-wrap: balance; }
.l2-comp .body { margin-top: 22px; font-size: 16.5px; line-height: 1.65; color: oklch(0.34 0.05 110); max-width: 52ch; }
.l2-comp ul { margin-top: 8px; }
.l2-comp ul li { display: flex; gap: 16px; align-items: center; padding: 17px 0; border-top: 1px solid oklch(0.225 0.008 95 / 0.18); font-size: 16px; font-weight: 500; }
.l2-comp ul li:first-child { border-top: 0; }
.l2-comp .note { margin-top: 20px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.07em; color: oklch(0.40 0.09 124); line-height: 1.8; }

/* заявка — white card split */
.l2-apply { display: grid; grid-template-columns: 5fr 7fr; gap: 88px; align-items: start; }
.l2-apply h2 { margin-top: 24px; font-family: var(--disp); font-size: 38px; font-weight: 600; line-height: 1.1; letter-spacing: -0.015em; text-wrap: balance; }
.l2-apply .body { margin-top: 22px; font-size: 16.5px; line-height: 1.65; color: var(--t-2); max-width: 40ch; }
.l2-contacts { margin-top: 36px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.l2-contacts a {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.03em;
  color: var(--t-2);
  background: var(--field);
  border-radius: 999px;
  padding: 11px 20px;
  transition: color .15s ease;
}
.l2-contacts a:hover { color: var(--t-1); }
.l2-contacts .cl { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--t-3); }
.l2-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.l2-form-foot { margin-top: 36px; display: flex; align-items: center; gap: 24px; }
.l2-form-fine { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.04em; color: var(--t-3); max-width: 36ch; line-height: 1.55; }

/* footer — ink card */
.l2-foot { padding: 64px 72px 40px; }
.l2-foot-top { display: grid; grid-template-columns: 1fr auto auto; gap: 96px; align-items: start; }
.l2-foot-wm { font-family: var(--disp); font-size: 38px; font-weight: 600; letter-spacing: -0.01em; display: flex; align-items: center; gap: 14px; }
.l2-foot-wm em { font-style: normal; opacity: 0.5; font-weight: 400; }
.l2-foot-tag { margin-top: 20px; color: var(--w-2); font-size: 14.5px; max-width: 34ch; line-height: 1.6; }
.l2-foot h5 { margin: 0 0 16px; font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--w-3); }
.l2-foot ul { display: flex; flex-direction: column; gap: 9px; }
.l2-foot a { color: var(--w-2); font-size: 15px; transition: color .15s ease; }
.l2-foot a:hover { color: var(--w-1); }
.l2-foot .mono a { font-family: var(--mono); font-size: 13px; letter-spacing: 0.02em; }
.l2-foot-base {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--wline);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--w-3);
}



  html, body { margin: 0; background: oklch(0.952 0.004 95); }
  #root .pg2 { max-width: 1472px; margin: 0 auto; }

/* ======================================================================
   INTERACTIVITY & MOTION  (added: smooth anchors, scroll-reveal, hovers)
   ====================================================================== */

html { scroll-behavior: smooth; }
/* offset so anchored sections aren't glued to the viewport top */
.pg2-stack > section[id] { scroll-margin-top: 24px; }

/* --- scroll reveal --- */
.pg2 .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s cubic-bezier(.22,.61,.36,1),
              transform .6s cubic-bezier(.22,.61,.36,1);
  transition-delay: var(--rd, 0ms);
  will-change: opacity, transform;
}
.pg2 .reveal.in { opacity: 1; transform: none; }

/* --- nav: lift + shadow once the page is scrolled --- */
.l2-nav {
  position: sticky;
  top: 12px;
  z-index: 40;
  transition: box-shadow .25s ease, background .25s ease, transform .25s ease;
}
.l2-nav.scrolled {
  box-shadow: 0 10px 30px -12px oklch(0.225 0.008 95 / 0.28);
  background: oklch(0.995 0.002 95 / 0.92);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
}
.l2-nav .links a { position: relative; }
.l2-nav .links a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -4px;
  height: 1.5px; background: var(--lime-deep);
  transition: right .22s ease;
}
.l2-nav .links a:hover::after { right: 0; }

/* --- buttons: lift, shadow, lime glow --- */
.pg2-btn {
  transition: background .15s ease, border-color .15s ease,
              transform .16s cubic-bezier(.22,.61,.36,1), box-shadow .2s ease;
}
.pg2-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -12px oklch(0.225 0.008 95 / 0.45);
}
.pg2-btn:active { transform: translateY(0) scale(0.985); }
.pg2-btn--lime:hover {
  box-shadow: 0 12px 28px -10px var(--lime-deep, oklch(0.86 0.2 124));
}
.pg2-btn[data-sent="1"] {
  background: var(--lime); color: var(--ink);
  border-color: var(--lime); cursor: default;
}
.pg2-btn[data-sent="1"]:hover { transform: none; box-shadow: none; }

/* --- cards: subtle hover lift --- */
.pg2-stack > section.pg2-card {
  transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease;
}
.pg2-stack > section.pg2-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 48px -28px oklch(0.225 0.008 95 / 0.35);
}

/* --- list/grid tiles: hover accents --- */
.l2-what li, .l2-bento li, .l2-why-list li {
  transition: transform .22s ease, background .22s ease, border-color .22s ease;
}
.l2-what li:hover, .l2-why-list li:hover { transform: translateY(-2px); }
.l2-bento li { transition: transform .25s cubic-bezier(.22,.61,.36,1), box-shadow .25s ease; }
.l2-bento li:hover {
  transform: translateY(-3px) scale(1.012);
  box-shadow: 0 16px 36px -22px oklch(0.225 0.008 95 / 0.4);
}
.pg2-chip { transition: border-color .15s ease, color .15s ease, background .15s ease, transform .12s ease; }
.pg2-chip:hover { transform: translateY(-1px); }
.pg2-chip:active { transform: translateY(0) scale(0.96); }

/* --- hero float tiles: gentle drift --- */
@keyframes pg2-float-a { 0%,100% { transform: rotate(-3deg) translateY(0); } 50% { transform: rotate(-3deg) translateY(-8px); } }
@keyframes pg2-float-b { 0%,100% { transform: translateY(0); } 50% { transform: translateY(7px); } }
@keyframes pg2-float-c { 0%,100% { transform: rotate(2deg) translateY(0); } 50% { transform: rotate(2deg) translateY(-6px); } }
.l2-float .t-status  { animation: pg2-float-a 7s ease-in-out infinite; }
.l2-float .t-partners{ animation: pg2-float-b 8s ease-in-out infinite .4s; }
.l2-float .t-payout  { animation: pg2-float-c 6.5s ease-in-out infinite .2s; }
.l2-float .pg2-tile { transition: box-shadow .25s ease; }
.l2-float .pg2-tile:hover { box-shadow: 0 18px 40px -22px oklch(0.225 0.008 95 / 0.45); }

/* --- live status dot pulse --- */
@keyframes pg2-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.l2-diagram .live, .t-status .th span:last-child { animation: pg2-pulse 2s ease-in-out infinite; }

/* --- contact form: honeypot + status messages --- */
.pg2-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  opacity: 0; overflow: hidden;
  pointer-events: none;
}
.l2-form-fine { transition: color .2s ease; }
.l2-form-fine[data-state="ok"]    { color: var(--lime-deep, oklch(0.62 0.16 135)); font-weight: 600; }
.l2-form-fine[data-state="error"] { color: oklch(0.55 0.2 25); font-weight: 600; }
.l2-form-fine[data-state="sending"] { opacity: .7; }

/* --- footer parent-brand link --- */
.l2-foot-link {
  display: inline-flex; align-items: center; gap: 6px;
  color: inherit; opacity: .8;
  transition: opacity .18s ease, color .18s ease;
}
.l2-foot-link:hover { opacity: 1; color: var(--lime); }
.l2-foot-link .pg2-arrow { transition: transform .2s ease; }
.l2-foot-link:hover .pg2-arrow { transform: translate(2px, -2px); }

/* --- respect reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .pg2 .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .l2-float .t-status, .l2-float .t-partners, .l2-float .t-payout,
  .l2-diagram .live, .t-status .th span:last-child { animation: none !important; }
  .pg2-btn:hover, .pg2-stack > section.pg2-card:hover,
  .l2-bento li:hover, .l2-what li:hover, .l2-why-list li:hover { transform: none; }
}

/* ======================================================================
   RESPONSIVE  —  tablet & mobile
   ====================================================================== */

/* ---- ≤ 900px: collapse multi-column layouts ---- */
@media (max-width: 900px) {
  .pg2 { font-size: 16px; padding: 12px; overflow-x: clip; }
  .pg2-card { padding: 40px; }

  /* nav: keep logo + CTA; drop inline links & phone */
  .l2-nav { gap: 16px; padding: 10px 12px 10px 20px; }
  .l2-nav .links,
  .l2-nav .phone { display: none; }

  /* hero → single column; hide decorative float panel */
  .l2-hero { grid-template-columns: 1fr; gap: 32px; padding: 48px 36px; }
  .l2-float { display: none; }
  .l2-hero h1 { font-size: 40px; }
  .l2-hero .lead { font-size: 17px; }

  /* two-column blocks → one column */
  .l2-what2,
  .l2-why,
  .l2-comp,
  .l2-apply,
  .l2-tasks-row { grid-template-columns: 1fr; gap: 40px; }
  .l2-what2 { padding-bottom: 64px; }
  .l2-what2-copy { position: static; }
  .l2-tasks-row { margin-top: 40px; }

  /* steps → vertical list, drop connector line */
  .l2-steps { grid-template-columns: 1fr; gap: 28px; margin-top: 48px; }
  .l2-steps::before { display: none; }

  /* product cards: single column, remove staggered offset */
  .l2-what { grid-template-columns: 1fr; }
  .l2-what2 .l2-what li:nth-child(even) { transform: none; }

  /* bento → 2 columns */
  .l2-bento { grid-template-columns: 1fr 1fr; }

  /* form fields & footer columns stack */
  .l2-form-grid { grid-template-columns: 1fr; }
  .l2-foot-top { grid-template-columns: 1fr; gap: 32px; }

  .pg2 h2.pg2-disp { font-size: 34px; }
}

/* ---- ≤ 560px: phone fine-tuning ---- */
@media (max-width: 560px) {
  .pg2 { padding: 8px; }
  .pg2-card { padding: 24px 20px; border-radius: 22px; }

  .l2-nav { gap: 10px; padding: 8px 10px 8px 16px; }
  .l2-nav .pg2-btn { padding: 11px 16px; font-size: 13px; }
  .l2-logo { height: 18px; }

  .l2-hero { padding: 32px 20px; gap: 24px; }
  .l2-hero h1 { font-size: 30px; margin-top: 18px; }
  .l2-hero .lead { font-size: 16px; }

  .pg2 h2.pg2-disp { font-size: 27px; }
  .pg2-label { font-size: 10px; letter-spacing: 0.1em; }

  /* hero CTAs stack full-width */
  .l2-hero .cta { flex-direction: column; align-items: stretch; }
  .l2-hero .cta .pg2-btn { width: 100%; }

  /* form footer stacks; button full width */
  .l2-form-foot { flex-direction: column; align-items: stretch; gap: 14px; }
  .l2-form-foot .pg2-btn { width: 100%; }

  /* bento single column — also drop the span-2 on wide tiles */
  .l2-bento { grid-template-columns: 1fr; }
  .l2-bento li { min-height: 140px; gap: 16px; padding: 24px 24px; }
  .l2-bento li.w2 { grid-column: auto; }
  .l2-bento li.w2 .ru { font-size: 20px; }

  /* inner tile padding trim */
  .l2-what li { padding: 26px 24px 28px; }

  .l2-foot-base { gap: 8px 16px; }
}