.page-frame { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }

        .top-navigation {
            position: relative;
            z-index: 5;
            padding: 17px 0;
            background: rgba(255,255,255,.86);
            border-bottom: 1px solid rgba(233,233,240,.75);
            backdrop-filter: blur(15px);
        }
        .navigation-row { min-height: 52px; display: flex; align-items: center; gap: 28px; }
        .skazhi-brand { display: inline-flex; align-items: center; flex: 0 0 auto; }
        .skazhi-brand img { width: 130px; height: auto; }
        .primary-menu { display: flex; align-items: center; gap: 30px; margin-left: auto; }
        .primary-menu a { color: #4e4f61; font-size: 14px; font-weight: 700; }
        .primary-menu a:hover { color: var(--pink); }
        .subscription-cancel { color: #7d7f8e; font-size: 13px; font-weight: 700; }

        .action-button {
            min-height: 56px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            padding: 0 28px;
            border: 0;
            border-radius: 14px;
            font-weight: 900;
            letter-spacing: -.012em;
            transition: transform .2s ease, box-shadow .2s ease;
        }
        .action-button:hover { transform: translateY(-3px); }
        .action-button--primary { background: var(--gradient); color: #fff; box-shadow: 0 12px 28px rgba(248,47,113,.28); }
        .action-button--primary:hover { box-shadow: 0 17px 34px rgba(248,47,113,.34); }
        .action-button--outline { background: #fff; color: var(--ink); border: 1px solid var(--line); box-shadow: 0 8px 20px rgba(49,36,78,.06); }
        .action-button--dark { background: var(--ink); color: #fff; box-shadow: 0 12px 30px rgba(26,26,46,.2); }
        .action-button--light { background: #fff; color: var(--pink); box-shadow: 0 12px 28px rgba(63,22,55,.16); }
        .navigation-action { min-height: 46px; padding-inline: 22px; }
        .action-arrow { font-size: 20px; line-height: 1; }

        .introduction {
            position: relative;
            min-height: 680px;
            display: flex;
            align-items: center;
            overflow: hidden;
            padding: 68px 0 94px;
            background: linear-gradient(155deg, #fff 0%, #fbfbfd 60%, #f7f8ff 100%);
        }
        .introduction::before { content: ''; position: absolute; width: 540px; height: 540px; right: -230px; top: -240px; border-radius: 50%; background: radial-gradient(circle, rgba(248,47,113,.13), rgba(248,47,113,0) 68%); }
        .introduction-layout { position: relative; z-index: 1; display: grid; grid-template-columns: 1.02fr .98fr; gap: 52px; align-items: center; }
        .introduction-label { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 19px; padding: 9px 13px; border-radius: 999px; background: var(--pink-soft); color: var(--pink); font-size: 12px; font-weight: 900; letter-spacing: .085em; text-transform: uppercase; }
        .introduction-label::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 0 5px rgba(248,47,113,.11); }
        h1, h2, h3, p { margin-top: 0; }
        h1 { margin-bottom: 22px; font-size: clamp(52px, 6.5vw, 82px); line-height: 1.01; letter-spacing: -.065em; }
        h1 span { color: var(--pink); }
        .introduction-summary { max-width: 650px; margin-bottom: 29px; color: var(--muted); font-size: 19px; }
        .introduction-summary strong { color: var(--ink); }
        .introduction-actions { display: flex; flex-wrap: wrap; gap: 12px; }
        .introduction-points { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 25px; color: #727486; font-size: 13px; font-weight: 700; }
        .introduction-points span { display: inline-flex; align-items: center; gap: 7px; }
        .introduction-points b { color: var(--pink); }

        .introduction-artwork { position: relative; min-height: 555px; display: grid; place-items: center; }
        .introduction-image { position: relative; z-index: 2; width: min(100%, 560px); filter: drop-shadow(0 22px 30px rgba(53,33,75,.11)); }
        .artwork-glow { position: absolute; width: 430px; height: 430px; border-radius: 50%; background: radial-gradient(circle, rgba(57,200,200,.18), rgba(248,47,113,.08) 48%, rgba(255,255,255,0) 72%); }
        .artwork-note { position: absolute; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 13px 16px; border: 1px solid rgba(233,233,240,.9); border-radius: 15px; background: rgba(255,255,255,.95); box-shadow: 0 15px 38px rgba(49,36,78,.14); font-size: 12px; font-weight: 800; }
        .artwork-note i { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; background: var(--pink-soft); color: var(--pink); font-style: normal; font-size: 18px; }
        .artwork-note.artwork-note--messages { left: 7px; top: 130px; }
        .artwork-note.artwork-note--safety { right: 0; bottom: 90px; }

        .service-metrics { position: relative; z-index: 3; margin-top: -44px; }
        .metrics-row { display: grid; grid-template-columns: repeat(3, 1fr); overflow: hidden; border: 1px solid var(--line); border-radius: 23px; background: #fff; box-shadow: var(--shadow); }
        .metric-item { padding: 28px; text-align: center; border-right: 1px solid var(--line); }
        .metric-item:last-child { border-right: 0; }
        .metric-item strong { display: block; margin-bottom: 7px; color: var(--purple); font-size: clamp(30px, 4vw, 46px); line-height: 1; letter-spacing: -.05em; }
        .metric-item span { color: var(--muted); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }