/* Three additional Kaspersky Standard landing concepts. The operator footer is shared. */
body.cinema-variant { background: #11111a; }
.cinema-variant .container.flow-shell { background: #11111a; }
.cinema-variant .variant-main { flex: 1; width: 100%; min-width: 0; }
.cinema-variant .kaspersky-lockup img { display: block; width: 130px; height: 27px; }
.cinema-variant .kaspersky-edition { color: inherit; border-color: currentColor; opacity: .8; }
.cinema-variant .lang-switcher { flex: none; }
.cinema-variant .lang-switcher button { padding: 5px 9px; }
.cinema-variant .variant-title { font-size: clamp(24px, 5vw, 32px); line-height: 1.2; font-weight: 800; }
.cinema-variant .variant-subtitle { font-size: 14px; line-height: 1.5; }
.cinema-variant .variant-form { width: 100%; min-width: 0; text-align: left; }
html[dir="rtl"] .cinema-variant .variant-form { text-align: right; }
.cinema-variant .variant-form .field-frame { width: 100%; }
.cinema-variant .variant-form .phone-input { width: 100%; min-width: 0; min-height: 58px; border-radius: 10px; direction: ltr; }
.cinema-variant .variant-form .phone-input input { min-width: 0; width: 0; flex: 1 1 0; }
.cinema-variant .variant-form .primary-btn { min-height: 56px; margin-top: 16px; border-radius: 10px; text-transform: none; }
.cinema-variant .variant-form .primary-btn[disabled] { background: #d8dce0 !important; color: #7e868f; box-shadow: none !important; }

/* Concept 2: light subscription card against an entertainment backdrop. */
.variant-card .variant-main {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 550px;
    padding: 18px;
    background: radial-gradient(circle at 50% 5%, #6ca7d7, transparent 42%), linear-gradient(155deg, #315a7c, #15283e 70%, #0d1c2d);
}
.variant-card .variant-main::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 44% -20% -20%;
    background: repeating-linear-gradient(25deg, #263e4c 0 45px, #1a3442 45px 90px);
    transform: rotate(-9deg);
    opacity: .65;
}
.variant-card .variant-main::after {
    content: "";
    position: absolute;
    z-index: -1;
    width: 680px;
    height: 190px;
    left: 50%;
    bottom: -130px;
    border-radius: 50%;
    background: #00bda3;
    filter: blur(32px);
    transform: translateX(-50%);
}
.variant-card .variant-panel {
    width: 100%;
    max-width: 430px;
    min-width: 0;
    padding: 18px 20px 20px;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 20px 50px rgba(0,0,0,.27);
    text-align: center;
}
.variant-card .variant-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; color: #1b252c; }
.variant-card .lang-switcher { border-color: #dce5e8; background: #eef3f4; }
.variant-card .lang-switcher button { color: #526b73; }
.variant-card .lang-switcher button.active { color: #005f82; background: #fff; }
.variant-card .card-visual {
    display: grid;
    place-items: center;
    width: 100px;
    height: 100px;
    margin: 16px auto 12px;
    border-radius: 50%;
    background: linear-gradient(145deg, #73a9ea, #337bc9);
    box-shadow: 0 16px 26px rgba(37,113,191,.22);
}
.variant-card .card-visual svg { width: 48px; height: 48px; fill: #fff; }
.variant-card .variant-title { margin: 0; color: #1768a8; }
.variant-card .variant-subtitle { max-width: 320px; margin: 8px auto 14px; color: #53636d; }
.variant-card .variant-form-label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 700; color: #26343b; text-align: center; }
.variant-card .variant-form .phone-input { border: 1.5px solid #cbd8de; }
.variant-card .variant-form .phone-input:focus-within { border-color: #3485cd; box-shadow: 0 0 0 3px rgba(52,133,205,.12); }
.variant-card .variant-form .field-label { color: #347aad; }
.variant-card .variant-form .primary-btn { background: #327bd0 !important; box-shadow: 0 8px 18px rgba(50,123,208,.22) !important; }
.variant-card .variant-form .primary-btn:hover { background: #236cbe !important; }

/* Concept 3: focused dark flow with progress indicator. */
.variant-step .variant-main { min-height: 540px; padding: 18px 20px 24px; background: #151515; color: #fff; }
.variant-step .step-inner { width: 100%; max-width: 440px; min-width: 0; margin: 0 auto; }
.variant-step .variant-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.variant-step .kaspersky-lockup img { filter: brightness(0) invert(1); }
.variant-step .lang-switcher { background: #292929; border-color: #454545; }
.variant-step .lang-switcher button { color: #d4d4d4; }
.variant-step .lang-switcher button.active { background: #00a88e; color: #071b17; }
.variant-step .step-label { margin: 17px 0 8px; color: #34cdb1; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.variant-step .step-bars { display: flex; gap: 7px; }
.variant-step .step-bars span { flex: 1; height: 6px; border-radius: 6px; background: #414141; }
.variant-step .step-bars span:first-child { background: #21b69c; }
.variant-step .step-visual { display: grid; place-items: center; width: 126px; height: 126px; margin: 22px auto 13px; border: 7px solid #00a88e; border-radius: 50%; }
.variant-step .step-visual svg { width: 60px; height: 60px; fill: #00a88e; }
.variant-step .variant-title { margin: 0; text-align: center; text-transform: uppercase; }
.variant-step .variant-subtitle { margin: 8px auto 14px; max-width: 330px; color: #b8c8c3; text-align: center; }
.variant-step .variant-form .field-label { background: #151515; color: #55d6bd; }
.variant-step .variant-form .phone-input { background: #1c1f1e; border-color: #00a88e; }
.variant-step .variant-form .phone-input:focus-within { border-color: #45e0c2; box-shadow: 0 0 0 3px rgba(0,168,142,.2); }
.variant-step .variant-form .phone-input .code,
.variant-step .variant-form .phone-input input { color: #fff; }
.variant-step .variant-form .phone-field-icon { color: #55d6bd; }
.variant-step .variant-form .primary-btn { background: #00a88e !important; color: #09211b; box-shadow: 0 8px 18px rgba(0,168,142,.2) !important; }
.variant-step .variant-form .primary-btn:hover { background: #2ed4b9 !important; }

/* Concept 4: cinematic poster wall with a compact dark form. */
.variant-poster .variant-main { position: relative; isolation: isolate; display: flex; flex-direction: column; min-height: 540px; overflow: hidden; padding: 18px 18px 24px; color: #fff; background: #151518; }
.variant-poster .variant-main::before { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg, rgba(8,8,15,.32) 0%, rgba(8,8,15,.62) 45%, #09090d 85%); }
.variant-poster .poster-wall { position: absolute; z-index: -2; inset: -70px -70px 120px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; transform: rotate(18deg) scale(1.1); }
.variant-poster .poster-tile { min-height: 155px; border-radius: 6px; box-shadow: inset 0 0 0 5px rgba(255,255,255,.08), 0 10px 16px rgba(0,0,0,.32); }
.variant-poster .poster-tile:nth-child(6n+1) { background: radial-gradient(circle at 45% 25%, #c99f6e 0 12%, transparent 13%), linear-gradient(145deg, #805742, #252533); }
.variant-poster .poster-tile:nth-child(6n+2) { background: radial-gradient(circle at 48% 33%, #73b2a5 0 18%, transparent 19%), linear-gradient(145deg, #152d35, #06151e); }
.variant-poster .poster-tile:nth-child(6n+3) { background: linear-gradient(135deg, #d77c54 15%, #4d2b3d 55%, #181624); }
.variant-poster .poster-tile:nth-child(6n+4) { background: radial-gradient(circle at 58% 28%, #d6c6a8 0 16%, transparent 17%), linear-gradient(145deg, #56627b, #191727); }
.variant-poster .poster-tile:nth-child(6n+5) { background: linear-gradient(125deg, #5a5a38, #1d2e2c 65%); }
.variant-poster .poster-tile:nth-child(6n) { background: radial-gradient(circle at 50% 40%, #b85b70 0 17%, transparent 18%), linear-gradient(140deg, #493045, #121b2d); }
.variant-poster .variant-top, .variant-poster .poster-content { width: 100%; max-width: 440px; min-width: 0; margin-inline: auto; }
.variant-poster .variant-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.variant-poster .kaspersky-lockup img { filter: brightness(0) invert(1); }
.variant-poster .lang-switcher { background: rgba(12,12,18,.62); border-color: rgba(255,255,255,.4); }
.variant-poster .lang-switcher button { color: #fff; }
.variant-poster .lang-switcher button.active { background: #fff; color: #26212c; }
.variant-poster .poster-content { margin-top: auto; padding-top: 140px; }
.variant-poster .variant-title { margin: 0; font-size: 27px; }
.variant-poster .variant-subtitle { margin: 8px 0 20px; color: #e7e2df; }
.variant-poster .variant-form .field-label { background: #25252b; color: #f9b27e; }
.variant-poster .variant-form .phone-input { background: #25252b; border: 1px solid #4c4b52; }
.variant-poster .variant-form .phone-input:focus-within { border-color: #ff7946; box-shadow: 0 0 0 3px rgba(255,121,70,.16); }
.variant-poster .variant-form .phone-input .code,
.variant-poster .variant-form .phone-input input { color: #fff; }
.variant-poster .variant-form .phone-field-icon { color: #f9b27e; }
.variant-poster .variant-form .primary-btn { background: #ff6c37 !important; box-shadow: 0 8px 18px rgba(255,108,55,.22) !important; }
.variant-poster .variant-form .primary-btn:hover { background: #ed5c2c !important; }

@media (max-width: 420px) {
    .cinema-variant .kaspersky-lockup { gap: 5px; }
    .cinema-variant .kaspersky-lockup img { width: 104px; height: auto; }
    .cinema-variant .kaspersky-edition { padding-left: 6px; font-size: 12px; }
    .variant-card .variant-panel { padding: 17px 16px 18px; }
    .variant-card .variant-main { padding: 14px; }
    .variant-poster .poster-content { padding-top: 120px; }
}

@media (max-width: 420px) and (max-height: 700px) {
    .variant-card .variant-main,
    .variant-step .variant-main,
    .variant-poster .variant-main { min-height: 510px; }
    .cinema-variant .variant-form .phone-input { min-height: 54px; }
    .cinema-variant .variant-form .primary-btn { min-height: 50px; margin-top: 12px; }
    .variant-step .step-visual { width: 110px; height: 110px; margin: 15px auto 10px; }
    .variant-poster .poster-content { padding-top: 95px; }
}