/* =========================================================
   DIMIDROL — страница «Сайты на заказ»
   Подключается после style.css и берёт оттуда токены,
   шапку, подвал, кнопки и сетку линий. Здесь — только то,
   что есть на этой странице.
   ========================================================= */

/* ---------- КНОПКА НА ЦВЕТНОМ ФОНЕ ---------- */

.btn--light{
    color: var(--c-text);
}

.btn--light::before{
    background: var(--c-surface);
}

.btn--light:hover{
    color: var(--c-text-inverse);
}

.btn--light:hover::before{
    background: var(--c-surface-inverse);
}

.btn--light:active::before{
    background: #222222;
}

/* ---------- ПЕРВЫЙ ЭКРАН ---------- */

.offer{
    position: relative;
}

.offer .side-label{
    top: auto;
    bottom: var(--sp-7);
}

.offer__grid{
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    border-bottom: 1px solid var(--c-line);
}

.offer__text{
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    gap: var(--sp-7);
    min-width: 0;
    padding: var(--sp-6) var(--sp-7) calc(var(--sp-7) + var(--sp-4));
    border-right: 1px solid var(--c-line);
}

.offer__top{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-4);
    color: var(--c-text-muted);
}

.offer__body{
    display: grid;
    gap: var(--sp-7);
    margin-block: auto;
}

.offer__title{
    font-family: var(--font-display);
    font-size: min(17cqi, 112px);
    font-weight: 500;
    line-height: .9;
    letter-spacing: -.05em;
    text-transform: uppercase;
}

.offer__accent{
    color: var(--c-accent);
}

.offer__lead{
    max-width: 44ch;
    font-family: var(--font-display);
    font-size: clamp(var(--fs-xl), 1.45vw, 20px);
    line-height: 1.45;
}

.offer__cta{
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-4);
}

/* правая колонка: макет на «миллиметровке» */
.offer__demo{
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--sp-7);
    min-width: 0;
    padding: var(--sp-7);
    background:
        radial-gradient(circle, rgba(30, 30, 30, .16) 1px, transparent 1.5px) 0 0 / 16px 16px,
        linear-gradient(180deg, #e6e6e6 0%, #f4f4f4 55%, var(--c-surface) 100%);
}

.demo__stage,
.demo__switch{
    position: relative;
    width: 100%;
    max-width: 680px;
    margin-inline: auto;
}

/* ---------- МАКЕТ: ОКНО БРАУЗЕРА ---------- */

.mock{
    position: relative;
    container-type: inline-size;
    overflow: hidden;
    border: 1px solid var(--c-line-strong);
    background: var(--c-surface);
    box-shadow: 0 40px 70px -30px rgba(0, 0, 0, .35);
}

.mock__bar{
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    height: 34px;
    padding-inline: var(--sp-4);
    border-bottom: 1px solid var(--c-line);
    background: #f5f5f5;
    font-size: var(--fs-xs);
    line-height: 16px;
    text-transform: uppercase;
}

.mock__dots{
    display: flex;
    gap: 5px;
}

.mock__dots i{
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #d0d0d0;
}

.mock__url{
    flex: 1;
    min-width: 0;
    padding: 2px var(--sp-2);
    border: 1px solid var(--c-line);
    background: var(--c-surface);
    color: var(--c-text-muted);
    text-transform: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mock__name{
    color: var(--c-accent);
    white-space: nowrap;
}

/* ---------- МАКЕТ: САМ САЙТ ----------
   Все размеры в cqi — макет масштабируется целиком,
   как картинка. Темы меняют только переменные. */

.site{
    /* тема по умолчанию — минимализм */
    --bg: #ffffff;
    --fg: #111111;
    --muted: #8a8a8a;
    --accent: #e63312;
    --font: var(--font-display);
    --head-font: var(--font-display);
    --head-size: 6.6cqi;
    --head-weight: 600;
    --head-case: none;
    --head-style: normal;
    --head-track: -.035em;
    --head-glow: none;
    --head-prefix: "";
    --nav-bg: transparent;
    --nav-fg: inherit;
    --radius: 0px;
    --line: 1px solid #e6e6e6;
    --card: #ffffff;
    --shadow: none;
    --blur: none;
    --thumb: #efefef;
    --btn-bg: #111111;
    --btn-fg: #ffffff;
    --btn-line: 1px solid transparent;
    --btn-radius: 0px;
    --btn-shadow: none;
    --pic: radial-gradient(circle at 58% 46%, #e63312 0 30%, transparent 31%) #f0f0f0;

    position: relative;
    display: grid;
    gap: 4.5cqi;
    padding: 4cqi 5cqi 5cqi;
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font);
    font-size: 2.4cqi;
    line-height: 1.35;
}

.site,
.site *{
    transition:
        background-color var(--dur-slow),
        color var(--dur-slow),
        border-color var(--dur-slow),
        border-radius var(--dur-slow),
        box-shadow var(--dur-slow);
}

/* синяя полоса пробегает по макету при смене стиля */
.site::after{
    content: "";
    position: absolute;
    inset: 0;
    z-index: 5;
    background: linear-gradient(90deg, transparent 40%, rgba(12, 94, 255, .25) 47%, var(--c-accent) 50%, rgba(12, 94, 255, .25) 53%, transparent 60%);
    opacity: 0;
    pointer-events: none;
}

.site.is-switching::after{
    animation: sweep .7s var(--ease);
}

@keyframes sweep{
    from{
        opacity: 1;
        transform: translateX(-60%);
    }
    to{
        opacity: 1;
        transform: translateX(60%);
    }
}

.site__nav{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 3cqi;
    margin: -4cqi -5cqi 0;
    padding: 2.4cqi 5cqi;
    border-bottom: var(--line);
    background: var(--nav-bg);
    color: var(--nav-fg);
}

.site__logo{
    font-family: var(--head-font);
    font-size: 3.4cqi;
    font-weight: var(--head-weight);
    font-style: var(--head-style);
    letter-spacing: var(--head-track);
    text-transform: var(--head-case);
}

.site__links{
    display: flex;
    gap: 3.5cqi;
    opacity: .7;
}

.site__hero{
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    align-items: center;
    gap: 4cqi;
}

.site__copy{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2.2cqi;
}

.site__kicker{
    color: var(--accent);
    font-size: 2.1cqi;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.site__title{
    font-family: var(--head-font);
    font-size: var(--head-size);
    font-weight: var(--head-weight);
    font-style: var(--head-style);
    line-height: 1.05;
    letter-spacing: var(--head-track);
    text-transform: var(--head-case);
    text-shadow: var(--head-glow);
}

.site__title::before{
    content: var(--head-prefix);
}

.site__text{
    max-width: 34ch;
    color: var(--muted);
}

.site__btn{
    margin-top: 1cqi;
    padding: 1.8cqi 3.6cqi;
    border: var(--btn-line);
    border-radius: var(--btn-radius);
    background: var(--btn-bg);
    color: var(--btn-fg);
    box-shadow: var(--btn-shadow);
    font-size: 2.3cqi;
    font-weight: 600;
}

.site__pic{
    aspect-ratio: 1;
    border: var(--line);
    border-radius: var(--radius);
    background: var(--pic);
    box-shadow: var(--shadow);
}

.site__cards{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3cqi;
}

.site__card{
    display: grid;
    gap: .8cqi;
    padding: 2cqi;
    border: var(--line);
    border-radius: var(--radius);
    background: var(--card);
    box-shadow: var(--shadow);
    -webkit-backdrop-filter: var(--blur);
    backdrop-filter: var(--blur);
}

.site__thumb{
    aspect-ratio: 16 / 9;
    margin-bottom: .6cqi;
    border-radius: calc(var(--radius) * .6);
    background: var(--thumb);
}

.site__card b{
    font-family: var(--head-font);
    font-size: 2.6cqi;
    font-weight: var(--head-weight);
    font-style: var(--head-style);
    text-transform: var(--head-case);
}

.site__card > span:last-child{
    color: var(--muted);
}

/* --- темы макета --- */

.site[data-theme="brutal"]{
    --bg: #ffe500;
    --fg: #000000;
    --muted: #000000;
    --accent: #000000;
    --font: var(--font-mono);
    --head-font: var(--font-mono);
    --head-size: 5.4cqi;
    --head-case: uppercase;
    --head-track: -.05em;
    --line: .5cqi solid #000000;
    --card: #ffffff;
    --shadow: 1cqi 1cqi 0 #000000;
    --thumb: repeating-linear-gradient(45deg, #000000 0 1cqi, #ffe500 1cqi 2cqi);
    --btn-bg: #ff3b30;
    --btn-fg: #000000;
    --btn-line: .5cqi solid #000000;
    --btn-shadow: 1cqi 1cqi 0 #000000;
    --pic: repeating-linear-gradient(-45deg, #000000 0 2.4cqi, #ffffff 2.4cqi 4.8cqi);
}

.site[data-theme="neon"]{
    --bg: #0a0618;
    --fg: #f3ecff;
    --muted: #a99bd8;
    --accent: #19f0ff;
    --head-case: uppercase;
    --head-track: .02em;
    --head-glow: 0 0 1cqi #ff2bd6, 0 0 3cqi #ff2bd6;
    --line: 1px solid rgba(25, 240, 255, .45);
    --card: rgba(255, 255, 255, .03);
    --shadow: 0 0 2.4cqi rgba(25, 240, 255, .18);
    --thumb: linear-gradient(135deg, #ff2bd6, #19f0ff);
    --btn-bg: transparent;
    --btn-fg: #19f0ff;
    --btn-line: 1px solid #19f0ff;
    --btn-shadow: 0 0 2cqi rgba(25, 240, 255, .55), inset 0 0 1.4cqi rgba(25, 240, 255, .35);
    --pic:
        radial-gradient(circle at 50% 60%, #ffcf3f 0, #ff2bd6 34%, transparent 35%),
        linear-gradient(transparent 62%, rgba(255, 43, 214, .6) 62% 63%, transparent 63%),
        linear-gradient(#1c0b45, #0a0618);
}

.site[data-theme="glass"]{
    --bg:
        radial-gradient(circle at 12% 18%, #ff9a8b 0, transparent 40%),
        radial-gradient(circle at 88% 28%, #8a7dff 0, transparent 42%),
        radial-gradient(circle at 55% 100%, #46e0c8 0, transparent 45%),
        #eef0ff;
    --fg: #1b1640;
    --muted: #514b80;
    --accent: #6c5ce7;
    --radius: 2.4cqi;
    --nav-bg: rgba(255, 255, 255, .3);
    --line: 1px solid rgba(255, 255, 255, .75);
    --card: rgba(255, 255, 255, .32);
    --shadow: 0 1.4cqi 4cqi rgba(40, 30, 120, .16);
    --blur: blur(10px);
    --thumb: linear-gradient(135deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .2));
    --btn-bg: #1b1640;
    --btn-radius: 99px;
    --pic: linear-gradient(135deg, rgba(255, 255, 255, .65), rgba(255, 255, 255, .12));
}

.site[data-theme="retro"]{
    --bevel: inset -1px -1px #0a0a0a, inset 1px 1px #ffffff, inset -2px -2px #808080, inset 2px 2px #dfdfdf;
    --bg: #c0c0c0;
    --fg: #000000;
    --muted: #303030;
    --accent: #000080;
    --font: Tahoma, "MS Sans Serif", Verdana, sans-serif;
    --head-font: Tahoma, "MS Sans Serif", Verdana, sans-serif;
    --head-weight: 700;
    --head-track: 0;
    --nav-bg: linear-gradient(90deg, #000080, #1084d0);
    --nav-fg: #ffffff;
    --line: 0 solid transparent;
    --card: #c0c0c0;
    --shadow: var(--bevel);
    --thumb: #008080;
    --btn-bg: #c0c0c0;
    --btn-fg: #000000;
    --btn-shadow: var(--bevel);
    --pic: linear-gradient(#000080, #1084d0) top / 100% 14% no-repeat, #008080;
}

.site[data-theme="editorial"]{
    --bg: #f1ece2;
    --fg: #1a1a1a;
    --muted: #6b6255;
    --accent: #8b2e16;
    --font: Georgia, "Times New Roman", serif;
    --head-font: Georgia, "Times New Roman", serif;
    --head-size: 7cqi;
    --head-weight: 400;
    --head-style: italic;
    --head-track: -.01em;
    --line: 1px solid #1a1a1a;
    --card: transparent;
    --thumb: linear-gradient(160deg, #cdbb9e, #6f5f4a);
    --btn-bg: transparent;
    --btn-fg: #1a1a1a;
    --btn-line: 1px solid #1a1a1a;
    --pic:
        radial-gradient(circle at 70% 30%, #f5ead5 0 11%, transparent 12%),
        linear-gradient(165deg, #d6c4a6, #6f5f4a);
}

.site[data-theme="terminal"]{
    --bg: #0b0f0b;
    --fg: #39ff6a;
    --muted: #22a648;
    --accent: #9dffb5;
    --font: var(--font-mono);
    --head-font: var(--font-mono);
    --head-size: 5cqi;
    --head-weight: 500;
    --head-track: -.03em;
    --head-glow: 0 0 1.2cqi rgba(57, 255, 106, .6);
    --head-prefix: "> ";
    --line: 1px dashed rgba(57, 255, 106, .5);
    --card: transparent;
    --thumb: repeating-linear-gradient(0deg, rgba(57, 255, 106, .3) 0 1px, transparent 1px 4px);
    --btn-bg: #39ff6a;
    --btn-fg: #0b0f0b;
    --pic:
        repeating-linear-gradient(0deg, rgba(57, 255, 106, .14) 0 1px, transparent 1px 5px),
        radial-gradient(circle, rgba(57, 255, 106, .35), transparent 60%),
        #0b0f0b;
}

.site[data-theme="terminal"] .site__title::after{
    content: "_";
    animation: blink 1s steps(1) infinite;
}

.site[data-theme="memphis"]{
    --bg: radial-gradient(rgba(42, 26, 94, .2) 14%, transparent 16%) 0 0 / 3cqi 3cqi, #fff3e4;
    --fg: #2a1a5e;
    --muted: #5b4a8c;
    --accent: #ff5c8a;
    --head-weight: 600;
    --head-track: -.02em;
    --radius: 3cqi;
    --line: .4cqi solid #2a1a5e;
    --card: #ffffff;
    --shadow: .8cqi .8cqi 0 #2a1a5e;
    --thumb: conic-gradient(from 45deg, #ffd23f 0 25%, #3ec6ff 0 50%, #ff5c8a 0 75%, #7bdc8f 0);
    --btn-bg: #ff5c8a;
    --btn-fg: #ffffff;
    --btn-line: .4cqi solid #2a1a5e;
    --btn-radius: 99px;
    --btn-shadow: .8cqi .8cqi 0 #2a1a5e;
    --pic:
        radial-gradient(circle at 70% 30%, #ffd23f 0 18%, transparent 19%),
        linear-gradient(135deg, transparent 55%, #3ec6ff 55% 75%, transparent 75%),
        repeating-linear-gradient(45deg, #ff5c8a 0 1.4cqi, transparent 1.4cqi 3.2cqi),
        #ffffff;
}

@keyframes blink{
    50%{
        opacity: 0;
    }
}

/* ---------- ПЛАШКА С ЦЕНОЙ ---------- */

/* срезанный угол — тот же приём, что у кнопок */
.price-tag{
    position: absolute;
    right: calc(-1 * var(--sp-5));
    bottom: 14%;
    z-index: 4;
    display: grid;
    gap: 2px;
    padding: var(--sp-4) var(--sp-6) var(--sp-5);
    background: var(--c-accent);
    color: var(--c-text-inverse);
    clip-path: polygon(0 0, 100% 0, 100% 100%, var(--chamfer) 100%, 0 calc(100% - var(--chamfer)));
}

.price-tag__small{
    font-size: var(--fs-xs);
    line-height: 16px;
    letter-spacing: .04em;
    text-transform: uppercase;
    opacity: .8;
}

.price-tag__value{
    margin-block: 2px 4px;
    font-family: var(--font-display);
    font-size: clamp(30px, 3.2vw, 44px);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -.03em;
    white-space: nowrap;
}

/* ---------- ПЕРЕКЛЮЧАТЕЛЬ СТИЛЕЙ ---------- */

.demo__switch{
    display: grid;
    gap: var(--sp-2);
}

.chips{
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-1);
}

.chip{
    position: relative;
    overflow: hidden;
    min-height: 36px;
    padding: var(--sp-1) var(--sp-4);
    border: 1px solid var(--c-line-strong);
    background: var(--c-surface);
    font-size: var(--fs-xs);
    line-height: 16px;
    text-transform: uppercase;
    transition: background var(--dur), color var(--dur), border-color var(--dur);
}

.chip:hover{
    border-color: var(--c-text);
}

.chip[aria-pressed="true"]{
    border-color: var(--c-surface-inverse);
    background: var(--c-surface-inverse);
    color: var(--c-text-inverse);
}

/* полоска-таймер под активным стилем, пока идёт автосмена */
.chip::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background: var(--c-accent);
}

.demo.is-playing .chip[aria-pressed="true"]::after{
    animation: chip-progress var(--step, 3200ms) linear forwards;
}

@keyframes chip-progress{
    to{
        width: 100%;
    }
}

/* ---------- ФАКТЫ ПОД ПЕРВЫМ ЭКРАНОМ ---------- */

.facts--offer dd{
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    line-height: 1.4;
}

/* ---------- ТАРИФЫ ---------- */

/* линии между ячейками — это фон сетки, видный в зазорах */
.plans,
.looks,
.steps{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    background: var(--c-line);
    border-bottom: 1px solid var(--c-line);
}

.plan{
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
    min-width: 0;
    padding: var(--sp-6) var(--sp-6) var(--sp-7);
    background: var(--c-surface);
    transition: background var(--dur);
}

.plan:hover{
    background: #fafafa;
}

.plan__top{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-4);
    min-height: 20px;
}

.plan__badge{
    padding: 2px var(--sp-2);
    background: var(--c-accent);
    color: var(--c-text-inverse);
}

.plan__name{
    font-family: var(--font-display);
    font-size: var(--fs-3xl);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -.03em;
    text-wrap: balance;
}

.plan__lead{
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    line-height: 1.4;
}

.plan__meta{
    margin-top: auto;
    border-top: 1px solid var(--c-line);
}

.plan__row{
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--sp-4);
    padding-block: var(--sp-4);
    border-bottom: 1px solid var(--c-line);
}

.plan__row dt{
    color: var(--c-text-muted);
}

.plan__row dd{
    font-size: var(--fs-md);
}

.plan__row--price{
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-2);
    padding-bottom: 0;
    border-bottom: 0;
}

.plan__row--price dd{
    font-family: var(--font-display);
    font-size: clamp(40px, 3.8vw, var(--fs-4xl));
    font-weight: 500;
    line-height: 1;
    letter-spacing: -.04em;
    white-space: nowrap;
    transition: color var(--dur);
}

.plan__row--price small{
    color: var(--c-text-muted);
    font-size: .4em;
    letter-spacing: 0;
}

.plan:hover .plan__row--price dd{
    color: var(--c-accent);
}

.plan .btn{
    align-self: flex-start;
}

/* выделенный тариф */
.plan--featured,
.plan--featured:hover{
    background: var(--c-surface-inverse);
    color: var(--c-text-inverse);
}

.plan--featured .plan__meta,
.plan--featured .plan__row{
    border-color: var(--c-line-inverse);
}

.plan--featured .plan__row dt,
.plan--featured .bar__muted,
.plan--featured .plan__row--price small{
    color: var(--c-text-inverse-muted);
}

.plan--featured:hover .plan__row--price dd{
    color: var(--c-text-inverse);
}

.plan--featured .btn--accent:hover{
    color: var(--c-text);
}

.plan--featured .btn--accent:hover::before{
    background: var(--c-surface);
}

.plan--featured :focus-visible{
    outline-color: var(--c-text-inverse);
}

.bar__link{
    flex: none;
}

/* ---------- СТИЛИ: ПЛИТКИ ---------- */

.look{
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    min-width: 0;
    padding: var(--sp-6);
    background: var(--c-surface);
}

.look__preview{
    position: relative;
    container-type: inline-size;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    isolation: isolate;
}

/* тонкая рамка поверх, чтобы светлые превью не сливались с фоном */
.look__preview::after{
    content: "";
    position: absolute;
    inset: 0;
    z-index: 10;
    border: 1px solid rgba(0, 0, 0, .08);
    pointer-events: none;
}

.look__head{
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--sp-4);
}

.look__name{
    font-family: var(--font-display);
    font-size: var(--fs-2xl);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -.01em;
}

.look__for{
    font-size: var(--fs-xs);
    line-height: 16px;
}

/* сцена превью: все размеры в cqi от ширины плитки */
.lk{
    position: absolute;
    inset: 0;
    overflow: hidden;
}

/* 01 — минимализм */

.lk--minimal{
    background:
        linear-gradient(rgba(0, 0, 0, .06) 1px, transparent 1px) 0 0 / 100% 25cqi,
        linear-gradient(90deg, rgba(0, 0, 0, .06) 1px, transparent 1px) 0 0 / 25cqi 100%,
        #f5f4f0;
    color: #111111;
    font-family: var(--font-display);
}

.lk-min__nav{
    position: absolute;
    top: 6cqi;
    left: 6cqi;
    right: 6cqi;
    display: flex;
    align-items: center;
    gap: 3cqi;
}

.lk-min__nav::before{
    content: "";
    width: 4cqi;
    height: 4cqi;
    margin-right: auto;
    background: #111111;
}

.lk-min__nav i{
    width: 8cqi;
    height: 1cqi;
    background: #111111;
    opacity: .3;
}

.lk-min__circle{
    position: absolute;
    top: 20cqi;
    right: 9cqi;
    width: 30cqi;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #e63312;
    transition: transform var(--dur-slow) var(--ease);
}

.look:hover .lk-min__circle{
    transform: translate(-10cqi, 5cqi) scale(1.15);
}

.lk-min__title{
    position: absolute;
    left: 6cqi;
    bottom: 6cqi;
    font-size: 9cqi;
    font-weight: 600;
    line-height: .95;
    letter-spacing: -.045em;
}

.lk-min__no{
    position: absolute;
    right: 6cqi;
    bottom: 6cqi;
    font-family: var(--font-mono);
    font-size: 3cqi;
    line-height: 1;
}

/* 02 — брутализм */

.lk--brutal{
    background: #ffe500;
    color: #000000;
    font-family: var(--font-mono);
    box-shadow: inset 0 0 0 1cqi #000000;
}

.lk-bru__title{
    position: absolute;
    left: 7cqi;
    top: 8cqi;
    font-size: 9cqi;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -.05em;
    text-transform: uppercase;
}

.lk-bru__btn{
    position: absolute;
    left: 7cqi;
    top: 36cqi;
    padding: 2cqi 4cqi;
    border: .7cqi solid #000000;
    background: #ffffff;
    box-shadow: 1.4cqi 1.4cqi 0 #000000;
    font-size: 3.4cqi;
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase;
    transition: transform var(--dur), box-shadow var(--dur);
}

.look:hover .lk-bru__btn{
    transform: translate(1.4cqi, 1.4cqi);
    box-shadow: 0 0 0 #000000;
}

.lk-bru__sticker{
    position: absolute;
    top: 8cqi;
    right: 7cqi;
    display: grid;
    place-items: center;
    width: 22cqi;
    aspect-ratio: 1;
    border: .7cqi solid #000000;
    border-radius: 50%;
    background: #ff3b30;
    font-size: 5cqi;
    font-weight: 600;
    transform: rotate(12deg);
    transition: transform var(--dur-slow) var(--ease);
}

.look:hover .lk-bru__sticker{
    transform: rotate(-10deg) scale(1.12);
}

.lk-bru__tape{
    position: absolute;
    left: 0;
    bottom: 7cqi;
    display: flex;
    width: max-content;
    padding-block: 1.6cqi;
    background: #000000;
    color: #ffe500;
    font-size: 3.4cqi;
    line-height: 1.2;
    text-transform: uppercase;
    white-space: nowrap;
    animation: ticker 9s linear infinite paused;
}

.lk-bru__tape span{
    padding-right: 2cqi;
}

.look:hover .lk-bru__tape{
    animation-play-state: running;
}

/* 03 — неон */

.lk--neon{
    background: linear-gradient(#07051a, #1d0b45 62%, #07051a 62%);
    color: #ffffff;
    font-family: var(--font-display);
}

.lk-neo__sun{
    position: absolute;
    left: 50%;
    top: 22cqi;
    width: 38cqi;
    aspect-ratio: 1;
    border-radius: 50%;
    background: linear-gradient(#ffd23f 10%, #ff2bd6 75%);
    transform: translateX(-50%);
    -webkit-mask: linear-gradient(#000 52%, transparent 52% 56%, #000 56% 62%, transparent 62% 66%, #000 66% 71%, transparent 71% 75%, #000 75%);
    mask: linear-gradient(#000 52%, transparent 52% 56%, #000 56% 62%, transparent 62% 66%, #000 66% 71%, transparent 71% 75%, #000 75%);
}

.lk-neo__floor{
    position: absolute;
    left: -50%;
    right: -50%;
    top: 62%;
    height: 60%;
    background:
        linear-gradient(90deg, rgba(255, 43, 214, .9) 1px, transparent 1px) 50% 0 / 8cqi 100%,
        linear-gradient(rgba(255, 43, 214, .9) 1px, transparent 1px) 0 0 / 100% 6cqi,
        #07051a;
    transform: perspective(40cqi) rotateX(60deg);
    transform-origin: top;
    animation: neon-floor 1.2s linear infinite paused;
}

.look:hover .lk-neo__floor{
    animation-play-state: running;
}

@keyframes neon-floor{
    to{
        background-position: 50% 0, 0 6cqi, 0 0;
    }
}

.lk-neo__title{
    position: absolute;
    left: 0;
    right: 0;
    top: 8cqi;
    font-size: 13cqi;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .1em;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 0 0 1cqi #19f0ff, 0 0 3cqi #19f0ff, 0 0 7cqi #19f0ff;
}

.look:hover .lk-neo__title{
    animation: flicker 1.4s steps(1) infinite;
}

@keyframes flicker{
    0%, 18%, 22%, 60%, 64%, 100%{
        opacity: 1;
    }
    20%, 62%{
        opacity: .35;
    }
}

.lk-neo__sub{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 4cqi;
    color: #19f0ff;
    font-family: var(--font-mono);
    font-size: 2.8cqi;
    letter-spacing: .24em;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 0 0 1.4cqi #19f0ff;
}

/* 04 — стекло */

.lk--glass{
    background: #eceeff;
    color: #1b1640;
    font-family: var(--font-display);
}

.lk-gla__blob{
    position: absolute;
    width: 40cqi;
    aspect-ratio: 1;
    border-radius: 50%;
    filter: blur(3cqi);
    transition: transform 1.2s var(--ease);
}

.lk-gla__blob--1{ left: -8cqi; top: -8cqi; background: #ff8a7a; }
.lk-gla__blob--2{ right: -6cqi; top: 8cqi; background: #8a7dff; }
.lk-gla__blob--3{ left: 28cqi; bottom: -16cqi; background: #3fe0c5; }

.look:hover .lk-gla__blob--1{ transform: translate(16cqi, 10cqi); }
.look:hover .lk-gla__blob--2{ transform: translate(-14cqi, 12cqi); }
.look:hover .lk-gla__blob--3{ transform: translate(8cqi, -12cqi); }

.lk-gla__card{
    position: absolute;
    left: 50%;
    top: 50%;
    display: flex;
    flex-direction: column;
    gap: 2cqi;
    width: 56cqi;
    padding: 5cqi;
    border: 1px solid rgba(255, 255, 255, .75);
    border-radius: 4cqi;
    background: rgba(255, 255, 255, .3);
    box-shadow: 0 2cqi 6cqi rgba(40, 30, 120, .18);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transform: translate(-50%, -50%);
}

.lk-gla__avatar{
    width: 9cqi;
    aspect-ratio: 1;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffffff, #c8c4ff);
}

.lk-gla__card b{
    font-size: 5cqi;
    font-weight: 600;
    line-height: 1.1;
}

.lk-gla__card i{
    height: 1.6cqi;
    border-radius: 1cqi;
    background: rgba(27, 22, 64, .18);
}

.lk-gla__card i + i{
    width: 70%;
}

.lk-gla__btn{
    align-self: flex-start;
    margin-top: 1cqi;
    padding: 1.6cqi 4cqi;
    border-radius: 99px;
    background: #1b1640;
    color: #ffffff;
    font-size: 3cqi;
    line-height: 1.2;
}

/* 05 — ретро 95 */

.lk--retro{
    --bevel: inset -1px -1px #0a0a0a, inset 1px 1px #ffffff, inset -2px -2px #808080, inset 2px 2px #dfdfdf;
    background: #008080;
    color: #000000;
    font-family: Tahoma, "MS Sans Serif", Verdana, sans-serif;
}

.lk-ret__icons{
    position: absolute;
    left: 5cqi;
    top: 5cqi;
    display: grid;
    gap: 5cqi;
}

.lk-ret__icons i{
    display: block;
    width: 8cqi;
    height: 6.5cqi;
    background: #ffd23f;
    box-shadow: inset -.6cqi -.6cqi #b08a00;
}

.lk-ret__icons i:nth-child(2){
    width: 6.5cqi;
    height: 8cqi;
    background: #ffffff;
    box-shadow: inset -.6cqi -.6cqi #9a9a9a;
}

.lk-ret__icons i:nth-child(3){
    background: #c0c0c0;
    box-shadow: var(--bevel);
}

.lk-ret__win{
    position: absolute;
    left: 20cqi;
    top: 10cqi;
    width: 70cqi;
    padding: .6cqi;
    background: #c0c0c0;
    box-shadow: var(--bevel);
    transition: transform var(--dur-slow) var(--ease);
}

.look:hover .lk-ret__win{
    transform: translate(-4cqi, -3cqi);
}

.lk-ret__title{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2cqi;
    padding: .8cqi .8cqi .8cqi 1.6cqi;
    background: linear-gradient(90deg, #000080, #1084d0);
    color: #ffffff;
    font-size: 3.2cqi;
    font-weight: 700;
    line-height: 1.2;
}

.lk-ret__ctrl{
    display: flex;
    gap: .5cqi;
}

.lk-ret__ctrl i{
    display: grid;
    place-items: center;
    width: 3.6cqi;
    height: 3.2cqi;
    background: #c0c0c0;
    box-shadow: var(--bevel);
    color: #000000;
    font-size: 2.4cqi;
    font-style: normal;
    line-height: 1;
}

.lk-ret__body{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3cqi;
    padding: 4.5cqi 4cqi;
    font-size: 3.6cqi;
    line-height: 1.2;
}

.lk-ret__bar{
    width: 100%;
    height: 4.4cqi;
    padding: .6cqi;
    background: #ffffff;
    box-shadow: inset 1px 1px #808080, inset -1px -1px #dfdfdf;
}

.lk-ret__bar span{
    display: block;
    width: 35%;
    height: 100%;
    background: repeating-linear-gradient(90deg, #000080 0 2.6cqi, transparent 2.6cqi 3.2cqi);
    transition: width 1.6s steps(8);
}

.look:hover .lk-ret__bar span{
    width: 100%;
}

.lk-ret__btn{
    min-width: 18cqi;
    padding: 1.2cqi 4cqi;
    background: #c0c0c0;
    box-shadow: var(--bevel);
    font-size: 3.2cqi;
    text-align: center;
}

.lk-ret__task{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    height: 7cqi;
    padding-inline: 1cqi;
    background: #c0c0c0;
    box-shadow: inset 0 1px #ffffff;
}

.lk-ret__task b{
    padding: .6cqi 2cqi;
    box-shadow: var(--bevel);
    font-size: 3cqi;
    line-height: 1.2;
}

/* 06 — журнал */

.lk--editorial{
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    grid-template-rows: auto auto auto 1fr;
    column-gap: 4cqi;
    padding: 5cqi 6cqi 0;
    background: #f1ece2;
    color: #1a1a1a;
    font-family: Georgia, "Times New Roman", serif;
}

.lk-edi__mast{
    grid-column: 1 / -1;
    padding-bottom: 1.4cqi;
    border-bottom: 3px double #1a1a1a;
    font-size: 8cqi;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .14em;
    text-align: center;
    text-transform: uppercase;
}

.lk-edi__meta{
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    padding: 1.2cqi 0 3.4cqi;
    font-size: 2.6cqi;
    font-style: italic;
    line-height: 1.2;
}

.lk-edi__title{
    grid-column: 1;
    font-size: 6.4cqi;
    font-style: italic;
    line-height: 1.02;
    letter-spacing: -.01em;
}

.lk-edi__photo{
    grid-column: 2;
    grid-row: 3 / span 2;
    margin-bottom: 5cqi;
    background:
        radial-gradient(circle at 70% 30%, #f5ead5 0 9%, transparent 10%) 0 0 / 100% 100% no-repeat,
        linear-gradient(165deg, #dccaa9, #8a765c 60%, #4d4134) 0 0 / 100% 160%;
    transition: background-position var(--dur-slow) var(--ease);
}

.look:hover .lk-edi__photo{
    background-position: 0 -5cqi, 0 100%;
}

.lk-edi__lines{
    grid-column: 1;
    display: grid;
    align-content: start;
    gap: 1.5cqi;
    margin-top: 3cqi;
}

.lk-edi__lines i{
    height: 1cqi;
    background: #1a1a1a;
    opacity: .25;
}

.lk-edi__lines i:last-child{
    width: 60%;
}

/* 07 — терминал */

.lk--terminal{
    display: flex;
    flex-direction: column;
    background: #0b0f0b;
    color: #39ff6a;
    font-family: var(--font-mono);
}

/* строки развёртки, как на старом мониторе */
.lk--terminal::after{
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(transparent 0 2px, rgba(0, 0, 0, .28) 2px 3px);
    pointer-events: none;
}

.lk-ter__bar{
    display: flex;
    align-items: center;
    gap: 1.6cqi;
    padding: 2.6cqi 4cqi;
    background: #171c17;
    color: #7d8c7d;
    font-size: 2.8cqi;
    line-height: 1.2;
}

.lk-ter__bar i{
    width: 2.6cqi;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #3a453a;
}

.lk-ter__bar span{
    margin-left: 2cqi;
}

.lk-ter__lines{
    display: grid;
    gap: 3cqi;
    padding: 6cqi 5cqi;
    font-size: 4.2cqi;
    line-height: 1.2;
    text-shadow: 0 0 1.2cqi rgba(57, 255, 106, .55);
}

.lk-ter__lines b{
    color: #e6ffe9;
    font-weight: 400;
}

.lk-ter__ok{
    color: #a6ffbf;
}

.lk-ter__cursor{
    display: inline-block;
    width: 2.4cqi;
    height: 4.2cqi;
    vertical-align: -.5cqi;
    background: #39ff6a;
    animation: blink 1s steps(1) infinite;
}

/* при наведении команды «печатаются» заново, строка за строкой */
.look:hover .lk-ter__lines > span{
    animation: term-line .01s both;
}

.look:hover .lk-ter__lines > span:nth-child(2){ animation-delay: .35s; }
.look:hover .lk-ter__lines > span:nth-child(3){ animation-delay: .7s; }
.look:hover .lk-ter__lines > span:nth-child(4){ animation-delay: 1.05s; }
.look:hover .lk-ter__lines > span:nth-child(5){ animation-delay: 1.4s; }

@keyframes term-line{
    from{
        opacity: 0;
    }
}

/* 08 — мемфис */

.lk--memphis{
    background: radial-gradient(rgba(42, 26, 94, .22) 14%, transparent 16%) 0 0 / 4cqi 4cqi, #fff3e4;
    color: #2a1a5e;
    font-family: var(--font-display);
}

.lk-mem__title{
    position: absolute;
    left: 7cqi;
    top: 9cqi;
    font-size: 8.4cqi;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -.03em;
}

.lk-mem__btn{
    position: absolute;
    left: 7cqi;
    top: 33cqi;
    padding: 1.8cqi 4.4cqi;
    border: .6cqi solid #2a1a5e;
    border-radius: 99px;
    background: #ff5c8a;
    color: #ffffff;
    box-shadow: 1cqi 1cqi 0 #2a1a5e;
    font-size: 3.4cqi;
    font-weight: 600;
    line-height: 1.2;
}

.lk-mem__shape{
    position: absolute;
    transition: transform var(--dur-slow) var(--ease);
}

.lk-mem__circle{
    top: 8cqi;
    right: 8cqi;
    width: 20cqi;
    aspect-ratio: 1;
    border: .7cqi solid #2a1a5e;
    border-radius: 50%;
    background: #ffd23f;
}

.lk-mem__tri{
    right: 34cqi;
    bottom: 9cqi;
    width: 15cqi;
    aspect-ratio: 1;
    background: #3ec6ff;
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.lk-mem__stripes{
    left: 7cqi;
    bottom: 10cqi;
    width: 30cqi;
    height: 9cqi;
    background: repeating-linear-gradient(45deg, #ff5c8a 0 1.4cqi, transparent 1.4cqi 3.2cqi);
    transform: rotate(-8deg);
}

.lk-mem__ring{
    right: 9cqi;
    bottom: 8cqi;
    width: 15cqi;
    aspect-ratio: 1;
    border: 1.6cqi solid #7bdc8f;
    border-radius: 50%;
}

.look:hover .lk-mem__circle{ transform: translate(-4cqi, 4cqi); }
.look:hover .lk-mem__tri{ transform: rotate(40deg) scale(1.1); }
.look:hover .lk-mem__stripes{ transform: rotate(6deg) translateX(3cqi); }
.look:hover .lk-mem__ring{ transform: scale(1.25); }

/* ---------- ЭТАПЫ ---------- */

.steps{
    list-style: none;
}

.step{
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    min-width: 0;
    padding: var(--sp-7) var(--sp-6);
    background: var(--c-surface);
}

/* контурные цифры, на наведении заливаются синим */
.step__num{
    margin-bottom: var(--sp-4);
    color: transparent;
    font-family: var(--font-display);
    font-size: var(--fs-4xl);
    font-weight: 400;
    line-height: .9;
    letter-spacing: -.05em;
    -webkit-text-stroke: 1px var(--c-text);
    transition: color var(--dur), -webkit-text-stroke-color var(--dur);
}

.step:hover .step__num{
    color: var(--c-accent);
    -webkit-text-stroke-color: var(--c-accent);
}

.step__title{
    font-family: var(--font-display);
    font-size: var(--fs-2xl);
    font-weight: 400;
    line-height: 1.15;
}

.step__text{
    color: var(--c-text-muted);
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    line-height: 1.5;
}

/* ---------- ПРИЗЫВ НАПИСАТЬ ---------- */

.cta{
    position: relative;
    container-type: inline-size;
    overflow: hidden;
    padding: var(--sp-8) var(--sp-7);
    background: var(--c-accent);
    color: var(--c-text-inverse);
}

.cta::before{
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(255, 255, 255, .12) 1px, transparent 1px) 0 0 / 64px 64px,
        linear-gradient(90deg, rgba(255, 255, 255, .12) 1px, transparent 1px) 0 0 / 64px 64px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%);
    mask-image: linear-gradient(90deg, transparent, #000 40%);
    pointer-events: none;
}

.cta__inner{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-7);
}

.cta__kicker{
    color: rgba(255, 255, 255, .75);
}

.cta__title{
    font-family: var(--font-display);
    font-size: 13cqi;
    font-weight: 500;
    line-height: .85;
    letter-spacing: -.05em;
    text-transform: uppercase;
}

.cta__text{
    max-width: 32ch;
    font-family: var(--font-display);
    font-size: clamp(var(--fs-xl), 1.8vw, var(--fs-2xl));
    line-height: 1.35;
}

.cta__actions{
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-4);
}

.cta .btn--ghost{
    --btn-ink: var(--c-text-inverse);
    --btn-fill: var(--c-accent);
}

/* почта — запасной канал, поэтому тихо и мелко */
.cta__mail{
    color: rgba(255, 255, 255, .6);
}

.cta__mail a{
    text-transform: none;
}

.cta .link:hover{
    color: var(--c-text-inverse);
}

.cta :focus-visible{
    outline-color: var(--c-text-inverse);
}

.footer__mail{
    color: var(--c-text-inverse-muted);
    font-size: var(--fs-xs);
}

/* ---------- АДАПТИВ ---------- */

@media (max-width: 1100px){

    .offer__grid{
        grid-template-columns: 1fr;
    }

    .offer__text{
        border-right: 0;
        border-bottom: 1px solid var(--c-line);
    }

    .offer__body{
        margin-block: var(--sp-7) 0;
    }

    .plans,
    .looks{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px){

    .steps{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px){

    .offer__text{
        gap: var(--sp-6);
        padding: var(--sp-6) var(--sp-6) var(--sp-7);
    }

    .offer__body{
        gap: var(--sp-6);
        margin-top: var(--sp-6);
    }

    .offer__demo{
        gap: var(--sp-6);
        padding: var(--sp-7) var(--sp-6);
    }

    .price-tag{
        right: calc(-1 * var(--sp-2));
        bottom: 10%;
        padding: var(--sp-2) var(--sp-4) var(--sp-4);
    }

    .price-tag__value{
        font-size: 26px;
    }

    .chip{
        min-height: 40px;
    }

    .plans,
    .steps{
        grid-template-columns: 1fr;
    }

    .look{
        gap: var(--sp-2);
        padding: var(--sp-4);
    }

    .look__head{
        margin-top: var(--sp-1);
    }

    .look__name{
        font-size: var(--fs-xl);
    }

    .look__head .label{
        display: none;
    }

    .cta{
        padding: var(--sp-7) var(--sp-6);
    }

    .cta__title{
        font-size: 21cqi;
    }

    .bar{
        flex-wrap: wrap;
    }
}