/* AICODE-NOTE: Защита от горизонтального скролла на мобилках.
   overflow-x: clip работает лучше hidden (не создаёт доп. scrollable area,
   не ломает sticky). hidden остаётся фолбэком для старых браузеров. */
html, body {
    overflow-x: hidden;
    overflow-x: clip;
}

body {
    font-family: var(--font-body);
    font-size: var(--fs-base);
    color: var(--color-text);
    background-color: var(--color-bg-light);
}

.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

section {
    position: relative;
    overflow: hidden;
}

h1, h2, h3, h4 {
    font-family: var(--font-pixel);
    line-height: 1.4;
}

h2 {
    font-size: var(--fs-xl);
    text-align: center;
    margin-bottom: var(--sp-2xl);
}

p {
    line-height: 1.7;
}

/* ==========================================================================
   Pixel-art frame utility (stepped corners)
   ==========================================================================
   AICODE-NOTE: Двухслойная рамка с зубчиками.
   Внешний слой = сам элемент: цвет рамки + clip-path (зубчатый прямоугольник).
   Внутренний слой = ::before: фон карточки, inset на --frame-w внутрь, clip-path
   наследуется (рисуется в собственной, чуть меньшей системе координат — поэтому
   зубчики ужимаются и образуют «оборотную» белую плашку поверх лавандовой).
   Контент карточки приподнят над ::before через z-index, иначе он окажется снизу.
*/
.pixel-frame {
    --frame-w: 3px;
    --frame-step: 8px;
    --frame-color: var(--color-primary);
    --frame-bg: #ffffff;
    position: relative;
    isolation: isolate;
    background: var(--frame-color);
    clip-path: polygon(
        0 var(--frame-step),
        var(--frame-step) var(--frame-step),
        var(--frame-step) 0,
        calc(100% - var(--frame-step)) 0,
        calc(100% - var(--frame-step)) var(--frame-step),
        100% var(--frame-step),
        100% calc(100% - var(--frame-step)),
        calc(100% - var(--frame-step)) calc(100% - var(--frame-step)),
        calc(100% - var(--frame-step)) 100%,
        var(--frame-step) 100%,
        var(--frame-step) calc(100% - var(--frame-step)),
        0 calc(100% - var(--frame-step))
    );
}

.pixel-frame::before {
    content: '';
    position: absolute;
    inset: var(--frame-w);
    background: var(--frame-bg);
    z-index: -1;
    clip-path: inherit;
}

/* Ghost variant: прозрачное тело, видна только лавандовая «рамка» */
.pixel-frame--ghost::before {
    background: transparent;
}

/* Pixel coin bullet: used as ::before for feature list items */
.pixel-coin {
    display: inline-block;
    width: 14px;
    height: 14px;
    min-width: 14px;
    background:
        radial-gradient(circle at 30% 30%, #ffe57a 0 3px, transparent 4px),
        linear-gradient(180deg, var(--color-coin) 0 50%, var(--color-coin-shade) 50% 100%);
    box-shadow:
        0 -2px 0 0 var(--color-coin),
        0 2px 0 0 var(--color-coin-shade),
        -2px 0 0 0 var(--color-coin),
        2px 0 0 0 var(--color-coin-shade);
    image-rendering: pixelated;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (min-width: 768px) {
    h2 {
        font-size: var(--fs-2xl);
    }
}

@media (min-width: 1024px) {
    h2 {
        font-size: var(--fs-3xl);
    }
}