/* CoFo Sona */
@font-face {
  font-family: 'CoFo Sona';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/CoFoSona/CoFoSona-Medium.woff2') format('woff2'),
       url('/assets/fonts/CoFoSona/CoFoSona-Medium.woff') format('woff');
}

/* Inter */
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/Inter/Inter-400-cyrillic-ext.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: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/Inter/Inter-400-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/Inter/Inter-400-greek-ext.woff2') format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/Inter/Inter-400-greek.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: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/Inter/Inter-400-vietnamese.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: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/Inter/Inter-400-latin-ext.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: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/Inter/Inter-400-latin.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: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/Inter/Inter-500-cyrillic-ext.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: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/Inter/Inter-500-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/Inter/Inter-500-greek-ext.woff2') format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/Inter/Inter-500-greek.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: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/Inter/Inter-500-vietnamese.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: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/Inter/Inter-500-latin-ext.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: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/Inter/Inter-500-latin.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: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/Inter/Inter-600-cyrillic-ext.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: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/Inter/Inter-600-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/Inter/Inter-600-greek-ext.woff2') format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/Inter/Inter-600-greek.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: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/Inter/Inter-600-vietnamese.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: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/Inter/Inter-600-latin-ext.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: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/Inter/Inter-600-latin.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: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/Inter/Inter-700-cyrillic-ext.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: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/Inter/Inter-700-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/Inter/Inter-700-greek-ext.woff2') format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/Inter/Inter-700-greek.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: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/Inter/Inter-700-vietnamese.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: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/Inter/Inter-700-latin-ext.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: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/Inter/Inter-700-latin.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;
}

/* Noto Sans */
/* cyrillic-ext */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/NotoSans/NotoSans-400-cyrillic-ext.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: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/NotoSans/NotoSans-400-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* devanagari */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/NotoSans/NotoSans-400-devanagari.woff2') format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* greek-ext */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/NotoSans/NotoSans-400-greek-ext.woff2') format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/NotoSans/NotoSans-400-greek.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: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/NotoSans/NotoSans-400-vietnamese.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: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/NotoSans/NotoSans-400-latin-ext.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: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/NotoSans/NotoSans-400-latin.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: 'Noto Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/NotoSans/NotoSans-500-cyrillic-ext.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: 'Noto Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/NotoSans/NotoSans-500-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* devanagari */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/NotoSans/NotoSans-500-devanagari.woff2') format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* greek-ext */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/NotoSans/NotoSans-500-greek-ext.woff2') format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/NotoSans/NotoSans-500-greek.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: 'Noto Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/NotoSans/NotoSans-500-vietnamese.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: 'Noto Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/NotoSans/NotoSans-500-latin-ext.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: 'Noto Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/NotoSans/NotoSans-500-latin.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;
}

body { background: #fff; color: #000; }

/* ── PAGE ── */
.page { display: flex; flex-direction: column; align-items: center; gap: 58px; }

/* ─────────────────────────────────────────
   SPRITE SYSTEM
   Natural: 112×824 px, 9 icons vertical
   Display: 56×412 px (50% scale)
   Each icon slot: ~42px tall, centered in 40px container
──────────────────────────────────────────*/
.si {
  width: 40px; height: 40px; flex-shrink: 0;
  background-image: url('/assets/images/boards/boards-tools-sprite.png');
  background-size: 56px 412px;
  background-repeat: no-repeat;
}
.si-0  { background-position: -8px  -16px; }
.si-1  { background-position: -8px  -53px; }
.si-2  { background-position: -8px  -95px; }
.si-3  { background-position: -8px -141px; }
.si-4  { background-position: -8px -185px; }
.si-5  { background-position: -8px -229px; }
.si-6  { background-position: -8px -273px; }
.si-7  { background-position: -8px -316px; }
.si-8  { background-position: -8px -361px; }

/* ── TOOLS PILL ── */
.tpill {
  display: inline-flex; align-items: center; gap: 2px;
  background: #fff; border: 1px solid #e5e5e5; border-radius: 8px;
  box-shadow: 0 4px 4px rgba(0,0,0,.05);
  height: 48px; padding: 3px 2px 0; overflow: hidden;
  align-self: flex-start;
}
.pill-svg {
  width: 40px; height: 40px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.pill-svg img { width: 20px; height: 20px; }
.pill-svg.green { background: #f0fcf3; border-radius: 4px; }
.pill-svg.green img { width: 14px; height: 20px; }

/* ── HERO ── */
.hero-wrap { width: 100%; display: flex; justify-content: center; padding: 0 20px; overflow: visible; }
@media (min-width: 64rem) { .hero-wrap { padding-top: 5rem; } }
.hero { position: relative; display: flex; flex-direction: column; align-items: center; gap: 49px; width: 100%; max-width: 864px; overflow: visible; }
.hero-float { position: absolute; left: -107px; top: 72px; width: 236px; height: 164px; object-fit: cover; pointer-events: none; z-index: 0; }
.hero-text { display: flex; flex-direction: column; align-items: center; gap: 27px; text-align: center; max-width: 556px; position: relative; z-index: 1; }
.hero-title { font-family: 'CoFo Sona', sans-serif; font-size: 80px; font-weight: 500; line-height: 72px; }
.hero-sub { font-family: 'Noto Sans', sans-serif; font-size: 24px; font-weight: 400; line-height: 1.4; }
.btn-dark { display: inline-flex; align-items: center; gap: 13px; background: #1f2937; color: #fff; font-family: 'CoFo Sona', sans-serif; font-size: 24px; font-weight: 500; padding: 13px 29px; border-radius: 42px; border: none; cursor: pointer; white-space: nowrap; position: relative; z-index: 1; }
.btn-dark img { width: 24px; height: 24px; }
.hero-badges { display: flex; gap: 12px; width: 100%; flex-wrap: wrap; justify-content: center; }
.hero-badge { font-family: 'Noto Sans', sans-serif; background: rgba(254,240,138,0.5); border-radius: 10px; padding: 16px; font-size: 18px; white-space: nowrap; }

/* ── BOARD IMAGE ── */
.board-img { width: 100%; }
.board-img video { width: 100%; height: auto; display: block; border-radius: 8px; }

/* ── FEATURES ── */
.features { display: flex; flex-direction: column; gap: 81px; align-items: center; width: 100%; padding: 0 20px; }
.feat-header { display: flex; flex-direction: column; align-items: center; gap: 33px; }
.feat-title { font-family: 'CoFo Sona', sans-serif; font-size: 80px; font-weight: 500; line-height: 72px; text-align: center; }

/* ── FEATURE ROWS ── */
.rows { display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: 1300px; }
.row { display: flex; align-items: center; gap: 62px; padding: 24px; border-radius: 8px; }
.row.tl { padding-left: 62px; padding-right: 24px; }
.row.il { padding-left: 24px; padding-right: 62px; }
.rtxt { flex: 1; display: flex; flex-direction: column; gap: 32px; min-width: 0; }
.rh { font-family: 'CoFo Sona', sans-serif; font-size: 60px; font-weight: 500; line-height: 56px; max-width: 13ch; }
.rd { font-family: 'Noto Sans', sans-serif; font-size: 20px; line-height: 26px; }
.rimg { width: 621px; flex-shrink: 0; border: 1px solid #dcdcdc; border-radius: 16px; overflow: hidden; position: relative; background: #f5f5f5; }
.rimg .cv { width: 100%; height: auto; display: block; }
.rimg .l1 { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.rimg .l2 { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 2; }
.rimg .l3 { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 3; }

/* ── LOTTIE BOX ── */
.lottie-box { width: 621px; height: 490px; flex-shrink: 0; border: 1px solid #dcdcdc; border-radius: 16px; overflow: hidden; position: relative; background: #f9f9f9; }
#lottie-stickers { width: 100%; height: 100%; }

/* ── STICKER / CURSOR / AVATAR ── */
.sticker { position: absolute; z-index: 2; box-shadow: 0 2.5px 10px rgba(0,0,0,.08); padding: 12px 15px; font-family: 'Inter', sans-serif; font-size: 13.5px; line-height: 1.45; color: #0d0d0d; width: 136px; height: 99px; }
.cursor { position: absolute; z-index: 4; display: flex; flex-direction: column; align-items: flex-start; }
.cur-arrow { width: 0; height: 0; border-style: solid; border-width: 0 7px 13px 7px; border-color: transparent transparent var(--c) transparent; transform: rotate(-45deg); margin-left: 17px; }
.cur-tag { color: #fff; font-family: 'JetBrains Mono', monospace; font-size: 13px; line-height: 1; padding: 3px 7px; border-radius: 4px; white-space: nowrap; background: var(--c); margin-top: 1px; }
.avatar-pill { display: inline-flex; align-items: center; background: #fff; border: 1px solid #e5e5e5; border-radius: 8px; box-shadow: 0 4px 4px rgba(0,0,0,.05); height: 48px; padding: 4px 12px; gap: 4px; align-self: flex-start; }
.avatar-pill img { width: 32px; height: 32px; border-radius: 50%; }

/* ── SUBSCRIPTION ── */
.sub { width: calc(100% - 46px); max-width: 1440px; background: #f2f2f2; border-radius: 24px; padding: 54px 20px 58px; display: flex; flex-direction: column; align-items: center; }
.sub-cont { max-width: 1030px; width: 100%; display: flex; flex-direction: column; gap: 42px; align-items: center; }
.sub-top { display: flex; flex-direction: column; gap: 38px; align-items: center; width: 100%; }
.sub-h { font-family: 'CoFo Sona', sans-serif; font-size: 80px; font-weight: 500; line-height: 72px; text-align: center; width: 100%; }
.sub-desc-block { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; max-width: 567px; width: 100%; }
.sub-d { font-family: 'Noto Sans', sans-serif; font-size: 18px; line-height: 26px; }
.sub-checks { display: flex; flex-direction: column; width: 100%; }
.sub-check { display: flex; align-items: flex-start; gap: 10px; font-family: 'Noto Sans', sans-serif; font-size: 18px; line-height: 26px; }
.chk { color: #16a34a; font-family: 'Inter', sans-serif; font-weight: 600; font-size: 19px; flex-shrink: 0; }
.sub-bottom { display: flex; flex-direction: column; gap: 40px; align-items: center; width: 100%; }
.before-after { display: flex; gap: 35px; align-items: stretch; justify-content: center; width: 100%; }
.sub-col { width: 480px; flex-shrink: 0; display: flex; flex-direction: column; gap: 8px; }
.sub-before-cards { display: flex; gap: 22px; flex: 1; }
.sub-btn { display: inline-flex; align-items: center; gap: 13px; background: #1f2937; color: #fff; font-family: 'CoFo Sona', sans-serif; font-size: 24px; font-weight: 500; padding: 13px 29px; border-radius: 42px; border: none; cursor: pointer; white-space: nowrap; }
.sub-btn img { width: 24px; height: 24px; }
.plabel { font-family: 'CoFo Sona', sans-serif; font-size: 18px; font-weight: 500; line-height: 26px; opacity: 0.4; }
.pcard { flex: 1; padding: 18px 20px; display: flex; flex-direction: column; gap: 2px; background: #fff; border: 1px solid #f9f9f9; border-radius: 16px; overflow: hidden; }
.pcard-green { flex: 1; padding: 26px 28px; display: flex; flex-direction: column; gap: 12px; border: 6px solid #bbd9c5; border-radius: 16px; }
.pc-hint { font-family: 'Noto Sans', sans-serif; font-size: 13px; color: #5c5c5c; }
.pc-name { font-family: 'CoFo Sona', sans-serif; font-size: 22px; font-weight: 500; line-height: 26px; }
.pcard .pc-name { position: relative; display: inline-block; width: fit-content; }
.pcard .pc-name::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: #dc2626; transform: translateY(-50%); }
.pc-price { font-family: 'Noto Sans', sans-serif; font-size: 22px; line-height: 26px; }
.pc-big { font-family: 'CoFo Sona', sans-serif; font-size: 35px; font-weight: 500; line-height: 1.1; }
.pc-free { font-family: 'Noto Sans', sans-serif; font-size: 20px; line-height: 26px; }
.savings { display: flex; align-items: flex-start; gap: 6px; }
.sav-ico { color: #16a34a; font-family: 'Inter', sans-serif; font-size: 19px; font-weight: 600; flex-shrink: 0; line-height: 1; margin-top: 2px; }
.sav-txt { color: #16a34a; font-family: 'Inter', sans-serif; font-size: 18px; font-weight: 500; }

/* ── AI CTA BLOCK ── */
.ai-cta { width: calc(100% - 46px); max-width: 1440px; background: #F6E1A8; border-radius: 16px; }
.ai-cta-inner { padding: 48px; display: grid; grid-template-columns: 2fr 1fr; gap: 32px; align-items: center; }
.ai-cta h2 { font-size: 36px; font-weight: 700; line-height: 1.2; }
.ai-cta p { font-size: 18px; line-height: 1.6; color: #374151; margin-top: 16px; }
.ai-btns { display: flex; flex-direction: column; gap: 16px; }
.ai-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; border-radius: 6px; border: 2px solid #000; font-family: 'JetBrains Mono', monospace; font-size: 15px; font-weight: 600; text-decoration: none; color: inherit; cursor: pointer; transition: box-shadow 0.15s; }
.ai-btn:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
.ai-btn img { width: 20px; height: 20px; }
.ai-btn-chatgpt { background: #fff; color: #374151; }
.ai-btn-claude { background: #FF7F4A; color: #000; }
.ai-btn-perplexity { background: #45AD94; color: #000; }

/* ── FOOTER ── */
footer { position: relative; margin-top: 2.5rem; }
footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 46px);
  max-width: 1440px;
  border-top: 1px solid var(--color-gray-500);
}

/* ═══════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════ */

@media (max-width: 1200px) {
  .rimg, .lottie-box { width: 48%; flex-shrink: 0; }
  .rows { max-width: 100%; }
  .row.tl { padding-left: 40px; }
  .row.il { padding-right: 40px; }
  .sub-col { width: 44%; flex-shrink: 0; }
  .before-after { justify-content: flex-start; }
}

@media (max-width: 1023px) {
  .page { gap: 40px; }
  .hero-title { font-size: 56px; line-height: 58px; }
  .hero-sub { font-size: 20px; }
  .hero-float { display: none; }
  .hero-badge { font-size: 16px; padding: 12px; }
  .btn-dark { font-size: 20px; }
  .features { gap: 56px; padding: 0 16px; }
  .feat-title { font-size: 52px; line-height: 56px; }
  .rh { font-size: 44px; line-height: 46px; }
  .rd { font-size: 18px; }
  .rows { gap: 12px; }
  .row { flex-direction: column; gap: 24px; padding: 20px; }
  .row.tl { padding: 20px; flex-direction: column; }
  .row.il { padding: 20px; flex-direction: column-reverse; }
  .rimg, .lottie-box { width: 100%; height: auto; flex-shrink: unset; }
  .sub { width: calc(100% - 24px); border-radius: 16px; }
  .sub-h { font-size: 52px; line-height: 56px; }
  .sub-cont { max-width: 100%; }
  .sub-col { width: 100%; }
  .before-after { flex-direction: column; gap: 0; }
  .sub-before-cards { height: auto; gap: 12px; }
  .pcard { min-height: 110px; }
  .sub-col:first-child { margin-bottom: 16px; }
  .ai-cta { width: calc(100% - 24px); }
  footer::before { width: calc(100% - 24px); }
  .ai-cta-inner { grid-template-columns: 1fr; padding: 36px 28px; gap: 24px; }
  .ai-cta h2 { font-size: 28px; }
  .ai-btns { flex-direction: row; flex-wrap: wrap; }
  .ai-btn { flex: 1; min-width: 180px; }
}

@media (max-width: 767px) {
  .page { gap: 28px; }
  .hero-wrap { padding-top: 40px; }
  .hero-text { gap: 16px; }
  .hero-title { font-size: 40px; line-height: 42px; }
  .hero-sub { font-size: 17px; }
  .hero-badges { flex-direction: column; align-items: stretch; }
  .hero-badge { white-space: normal; text-align: center; font-size: 15px; padding: 10px 14px; }
  .btn-dark { font-size: 17px; padding: 11px 22px; }
  .feat-title { font-size: 36px; line-height: 40px; }
  .rh { font-size: 34px; line-height: 38px; max-width: none; }
  .rh br { display: none; }
  .rd { font-size: 16px; line-height: 24px; }
  .rimg, .lottie-box { height: auto; }
  .tpill { height: 40px; }
  .si { width: 32px; height: 32px; }
  .si-0  { background-position: -8px  -15px; }
  .si-1  { background-position: -8px  -58px; }
  .si-2  { background-position: -8px -100px; }
  .si-3  { background-position: -8px -146px; }
  .si-4  { background-position: -8px -190px; }
  .si-5  { background-position: -8px -234px; }
  .si-6  { background-position: -8px -278px; }
  .si-7  { background-position: -8px -321px; }
  .si-8  { background-position: -8px -366px; }
  .sub { padding: 36px 16px 40px; }
  .sub-h { font-size: 36px; line-height: 40px; }
  .sub-d { font-size: 16px; }
  .sub-check { font-size: 16px; }
  .pc-big { font-size: 26px; }
  .pc-name, .pc-price { font-size: 18px; }
  .sub-btn { font-size: 18px; }
  .ai-cta-inner { padding: 28px 20px; }
  .ai-cta h2 { font-size: 22px; }
  .ai-cta p { font-size: 16px; }
  .ai-btns { flex-direction: column; }
  .ai-btn { min-width: unset; }
}

@media (max-width: 479px) {
  .hero-title { font-size: 40px; line-height: 42px; }
  .hero-sub { font-size: 15px; }
  .feat-title { font-size: 36px; line-height: 40px; }
  .rh { font-size: 28px; line-height: 32px; }
  .rtxt { gap: 16px; }
  .rimg, .lottie-box { height: auto; }
  .sub-h { font-size: 36px; line-height: 40px; }
  .before-after { gap: 12px; }
}