/*   :: import ---   */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz@0,14..32;1,14..32&display=swap');

@font-face {
    font-family: "Bebas";
    font-style: normal;
    font-weight: bold;
    src: url("../fonts/bebas.woff2") format("woff2");
}

:root {
    /* Fonts 2 */
    --wf: "Inter", sans-serif;
    --wf2: "Bebas", sans-serif;

    /* Theme colors */
    --color-primary: #311F1B;
    --color-primary-light: #1f50ff;
    --color-primary-dark: #0736dc;
    --color-secondary: #05e745;
    --color-secondary-light: #0afc4c;
    --color-secondary-dark: #04cd3d;
    --color-accent: #F7685B;
    --color-accent-light: #fc8076;
    --color-accent-dark: #e75548;
    --color-dark: #192a3e;
    --color-white: #ffffff;
    --color-bg: #F7F9FA;

    /* Content */
    --color-text: var(--color-dark);
    --color-text-grey: #575757;
    --color-text-light-grey: #a2a2a2;
    --color-text-accent: var(--color-accent);
    --color-text-heading: var(--color-primary-dark);
    --color-link: var(--color-primary);
    --color-link-hover: var(--color-text);
    --color-link-active: var(--color-text);
    --color-icon-grey: var(--color-text-grey);
    --color-icon-active: var(--color-text);
    --thover: rgba(0, 0, 0, 0.1);
    /*transparent hover*/
    --trans: all 0.2s;
    /*transition delay*/

    /* Fonts sizes */
    --size-text: 1.12rem;
    --size-text-s: 0.9375rem;
    --size-text-note: 0.8rem;
    --size-heading-xl: 1.8rem;
    --size-heading-l: 1.64rem;
    --size-heading-m: 1.48rem;
    --size-heading-s: 1.32rem;
    --size-heading-xs: 1.2rem;

    /* Support colors */
    --color-orange: #ffb946;
    --color-red: #f7685b;
    --color-green: #34B999;
    --color-blue: #104ae0;
    --color-purple: #885af8;

    /* UI Sizes */
    --ui-size: 36px;
    --ui-size-s: 24px;
    --ui-size-l: 44px;
    --ui-radius: 8px;

    /* UI Colors */
    --ui-bg-100: #F5F5F5;
    --ui-bg-200: #EBEBEB;
    --ui-bg-300: #E1E1E1;
    --ui-input-bg: #fff;
    --ui-input-bg-active: #dee7ff;
    --ui-input-bg-disabled: #EFF2F6;
    --ui-color-primary: #0043ed;
    --ui-color-primary-active: var(--ui-color-primary);
    --ui-color-primary-hover: #1250ef;
    --ui-color-text: var(--color-dark);
    --ui-color-text-hover: var(--ui-color-primary-hover);
    --ui-color-text-active: var(--ui-color-primary);
    --ui-color-text-disabled: #bababa;
    --ui-color-text-grey: #737373;
    --ui-color-text-light-grey: #9b9b9b;
    --ui-color-placeholder: var(--color-text-grey);
    --ui-color-border: #6e6e6e;
    --ui-color-border-active: #0043ed;
    --ui-color-border-hover: #454545;

    /* Buttons */
    --color-btn: var(--ui-color-primary);
    --color-btn-hover: var(--ui-color-primary-hover);
    --color-btn-text: var(--color-white);
    --color-btn-text-hover: var(--color-white);
    --color-btn-sec: #DBE5FF;
    --color-btn-sec-hover: #EBF1FF;
    --color-btn-sec-text: var(--color-primary);
    --color-btn-sec-text-hover: var(--color-primary);

    /* UI Borders */
    --ui-input-border: 1px solid var(--ui-color-border);
    --ui-input-border-active: 1px solid var(--ui-color-border-active);
    /* not used */
    --ui-input-border-hover: 1px solid var(--ui-color-border-hover);


    /* UI Shadows */
    --ui-shadow-focus: 0 5px 10px rgba(0, 0, 0, 0.1), 0 0 0 2px #b5c9fc;
    --ui-shadow-error: 0 5px 10px rgba(0, 0, 0, 0.1), 0 0 0 2px #fcb5b5;

    /*UI Transitions */
    --ui-trans: 0.16s ease;

    /* Box-Shadows */
    --sp-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --sp-shadow-s: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --sp-shadow-m: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --sp-shadow-l: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --sp-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --sp-shadow-inset: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
    --sp-drop-shadow-s:
        drop-shadow(0 0 1px rgba(49, 31, 27, 0.28)) drop-shadow(0 2px 3px rgba(49, 31, 27, 0.1));

    /* Objects */
    --gf: 8px;
    /* grid flow */
    --gap: 16px;
    /* grid gap */
    --header-height: 48px;
    --wid: 1280px;
    /* max-width of content */
    --content-width: 740px;
    --content-line-height: 1.5;
    /* max-width of text content */

    /* SP5 DEV */
    --sp5-1: #05e745;
    --sp5-2: #222e4e;
}

/*   :: VARS ---   */

/*   :: Base tags ---   */
*,
::after,
::before {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

.body {
    color: var(--color-text);
    font-family: var(--wf), Helvetica, Arial, sans-serif;
    font-size: var(--size-text);
    background: var(--color-bg);
    margin: 0;
    padding: 0;
    background: url('../img/sky-s.jpg') no-repeat top center;

}

.body--articles {
    background: #DCE8E9 url('../img/sky-b.jpg') no-repeat top center;
}

img {
    max-width: 100%;
    height: auto;
}

a,
a:link,
a:visited,
a:active {
    color: var(--color-link);
    text-decoration: none;
    transition: var(--trans);
}

a:hover {
    color: var(--color-link-hover);
}

/* Visually hides an element while keeping it accessible to search engines and screen readers */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}


/*   (2) SP5 Tokens ------- ------- ------- ------- ------- */

.wid {
    width: 100%;
    max-width: var(--wid);
    min-width: 748px;
    margin: 0 auto;
}

.wa {
    width: auto;
}

.fw {
    width: 100%;
}


.wf {
    font-family: var(--wf);
}

.wf2 {
    font-family: var(--wf2);
}

.cimg,
.tac {
    text-align: center;
}

.tal {
    text-align: left;
}

.tar {
    text-align: right;
}


.fb {
    font-weight: bold;
}

.fi {
    font-style: italic;
}

.fsn {
    font-size: var(--size-text-note);
}

.ca {
    color: var(--color-accent);
}

.cp {
    color: var(--color-primary);
}

.cg {
    color: var(--color-text-grey);
}

.clg {
    color: var(--color-text-light-grey);
}

.nwp {
    white-space: nowrap;
}

.hide-on-mobile,
.hom {
    display: block;
}

.show-on-mobile,
.som {
    display: none;
}

.dn {
    display: none !important;
}

.clicked-item {
    cursor: pointer;
    transition: var(--trans);
    text-decoration: none;
}

.clicked-item:hover {
    transition: var(--trans);
    text-decoration: underline;
}


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

@media screen and (max-width: 768px) {
    :ROOT {
        --wid: 100%;
    }

    .wid {
        max-width: 100%;
        min-width: 100%;
    }

    .hide-on-mobile,
    .hom {
        display: none;
    }

    .show-on-mobile,
    .som {
        display: block;
    }
}

/* new Tokens dec 2025 */
/* Containers */
.df {
    display: flex;
}

.dif {
    display: inline-flex;
}

.aic {
    align-items: center;
}

.ais {
    align-items: stretch;
}

.jcc {
    justify-content: center;
}

.jcsb {
    justify-content: space-between;
}

.jcsa {
    justify-content: space-around;
}

.jce {
    justify-content: flex-end;
}

.fldc {
    flex-direction: column;
}

.fldr {
    flex-direction: row;
}

/* Child elements */
.fl1 {
    flex: 1;
}

.fln {
    flex: none;
}

.flw {
    flex-wrap: wrap;
}

.flss {
    flex-shrink: 0;
}

/* /new Tokens dec 2025 */

/*   (3) SP5 Service classes ------- ------- ------- ------- ------- */

/*   :: Pads ---   */
.pad-1 {
    width: 100%;
    height: 1px;
}

.pad-4 {
    width: 100%;
    height: 4px;
}

.pad-x1 {
    width: 100%;
    height: var(--gf);
}

.pad-x2 {
    width: 100%;
    height: calc(var(--gf) * 2);
}

.pad-x3 {
    width: 100%;
    height: calc(var(--gf) * 3);
}

.pad-x4 {
    width: 100%;
    height: calc(var(--gf) * 4);
}

.pad-x5 {
    width: 100%;
    height: calc(var(--gf) * 5);
}

.pad-x6 {
    width: 100%;
    height: calc(var(--gf) * 6);
}

.pad-x8 {
    width: 100%;
    height: calc(var(--gf) * 8);
}

/*   :: SP5 icons ---   */
[class*='spis-'] {
    stroke: var(--color-icon-grey);
    fill: none;
    flex-shrink: 0;
}

[class*='spis-']:hover {
    stroke: var(--color-icon-active);
}

.spis {
    stroke: var(--color-icon-grey);
    fill: none;
}

.spis-16 {
    width: 16px;
    height: 16px;
}

.spis-24 {
    width: 24px;
    height: 24px;
}

.spis-32 {
    width: 32px;
    height: 32px;
}

[class*='spif-'] {
    fill: var(--color-icon-grey);
    stroke: none;
    flex-shrink: 0;
}

[class*='spif-']:hover {
    fill: var(--color-icon-active);
}

.spif {
    fill: var(--color-icon-grey);
    stroke: none;
}


.spif-16 {
    width: 16px;
    height: 16px;
}

.spif-24 {
    width: 24px;
    height: 24px;
}

.spif-32 {
    width: 32px;
    height: 32px;
}

.itext {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

[class*='itext-'] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

[class*='itext-'] img {
    flex-shrink: 0;
}

[class*='itext-'] svg {
    flex-shrink: 0;
}

/* 16 */
.itext-16 img {
    width: 16px;
    flex-shrink: 0;
}

.itext-16 svg {
    width: 16px;
    height: 16px;
}

/* 24 */
.itext-24 img {
    width: 24px;
}

.itext-24 svg {
    width: 24px;
    height: 24px;
}

/* 32 */
.itext-32 img {
    width: 32px;
}

.itext-32 svg {
    width: 32px;
    height: 32px;
}

/* 40 */
.itext-40 img {
    width: 40px;
}

.itext-40 svg {
    width: 40px;
    height: 40px;
}

/* 48 */
.itext-48 img {
    width: 48px;
}

.itext-48 svg {
    width: 48px;
    height: 48px;
}

/* itext pan */
.itext-pan {
    display: flex;
    padding: var(--gap) 0;
    margin: var(--gf) 0;
}

.itext-pan [class*='itext-'] {
    margin-right: var(--gap);
}

/*   :: Made in space5 ---   */
.madeinsp5 {
    display: inline-block;
    background: transparent url("../img/sp5-logo.svg") no-repeat;
    background-size: contain;
    width: 56px;
    height: 33px;
    filter: grayscale(100%);
    transition: var(--trans);
}

.madeinsp5:hover {
    filter: none;
}


/*   :: Video responsive ---   */
.video-responsive {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

/* запасной вариант для браузеров без aspect-ratio (до 2021 года) */
@supports not (aspect-ratio: 16 / 9) {
    .video-responsive {
        height: 0;
        padding-bottom: 56.25%;
    }
}

.video-responsive iframe,
.video-responsive object,
.video-responsive embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* /Video responsive */

/*   (4) SP5 Grid ------- ------- ------- ------- ------- */
.grid-wr {
    display: grid;
    grid-template-columns: 1fr minmax(320px, var(--wid)) 1fr;
}

.grid-a {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
    grid-gap: var(--gap);
}

.grid-line {
    grid-column: 1/-1;
}

.grid-a240 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    grid-gap: var(--gap);
}

[class*='grid-c-'] {
    display: grid;
    grid-gap: var(--gap);
    align-items: start;
}

.grid-c-2 {
    grid-template-columns: 1fr 1fr;
}

.grid-c-3 {
    grid-template-columns: 1fr 1fr 1fr;
}

.grid-c-4 {
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

.grid-c-5 {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}

.grid-c-6 {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}

.grid-c-7 {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

.grid-c-8 {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

.grid-c-9 {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

.grid-c-10 {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

.grid-c-11 {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

.grid-c-12 {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

.grid-demo {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

@media screen and (max-width: 768px) {
    [class*='grid-c-'] {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    }
}

/*   (5) SP5 Buttons ------- ------- ------- ------- ------- */
.btn,
a.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--gf);
    padding: 0 24px;
    border-radius: var(--ui-radius);
    border: 1px solid transparent;
    cursor: pointer;
    color: var(--color-btn-text);
    background: var(--color-btn);
    transition: var(--ui-trans);
    font-size: var(--size-text);
    line-height: 1;
    font-family: inherit;

    height: var(--ui-size);
}

.btn:hover {
    transition: var(--ui-trans);
    background: var(--color-btn-hover);
    color: var(--color-btn-text-hover);
}

.btn--sec,
a.btn--sec {
    background: var(--color-btn-sec);
    color: var(--color-btn-sec-text);
}

.btn--sec:hover {
    background: var(--color-btn-sec-hover);
    color: var(--color-btn-sec-text-hover);
}

/* btn icon */
.btn svg {
    fill: none;
    stroke: currentColor;
    width: 16px;
    height: 16px;
}

.btn svg.spif {
    fill: currentColor;
    stroke: none;
}

.btn:hover svg.spif {
    fill: currentColor;
    stroke: none;
}

.btn svg.spis {
    stroke: currentColor;
    fill: none;
}

.btn:hover svg.spis {
    stroke: currentColor;
    fill: none;
}

.btn img {
    width: 16px;
    height: 16px;
}


/* btn sizes --- */
.btn--s,
a.btn--s,
.btn.ui-s,
a.btn.ui-s {
    height: var(--ui-size-s);
    padding: 0 16px;
    font-size: 0.8rem;
}

.ui-s svg,
.btn--s svg {
    width: 16px;
    height: 16px;
}

.btn--l,
a.btn--l,
.btn.ui-l,
a.btn.ui-l {
    height: var(--ui-size-l);
    padding: 0 32px;
}

.btn--l svg,
.btn.ui-l svg {
    width: 16px;
    height: 16px;
}

/* btn outline */
.btn--outline,
a.btn--outline {
    background: transparent;
    color: var(--color-text);
    border: 1px solid var(--ui-color-border);
}

.btn--outline svg {
    stroke: var(--color-text);
}

.btn--outline:hover {
    color: var(--color-text);
    background: transparent;
    border-color: var(--ui-color-border-hover);
}

.btn--outline:hover svg {
    stroke: currentColor;
}

/* /btn outline */


/* btn all */
.btn--all,
a.btn--all {
    font-family: var(--wf2);
    font-size: var(--size-heading-xs);
    text-transform: uppercase;

}

/* /btn all */

/* btn ghost */
.btn--ghost,
a.btn--ghost {
    background: transparent;
    color: var(--color-text);
    border: 1px solid transparent;
}

.btn--ghost svg {
    stroke: var(--color-text);
}

.btn--ghost:hover {
    background: var(--thover);
    color: var(--color-text);
    border-color: transparent;
}

.btn--ghost:hover svg {
    stroke: currentColor;
}

/* /btn ghost */

/* btn more — «Читать далее»: без боковых отступов, underline при hover */
.btn--more,
a.btn--more {
    padding-left: 0;
    padding-right: 0;
    background: transparent;
    color: var(--color-text);
    border: none;
    border-radius: 0;
    font-size: var(--size-text-s);
    text-decoration: none;
}

.btn--more svg {
    stroke: currentColor;
}

@keyframes btn-more-arrow-move {

    0%,
    100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(4px);
    }
}

.btn--more:hover,
a.btn--more:hover,
.btn--more:focus-visible,
a.btn--more:focus-visible {
    background: transparent;
    color: var(--color-text);
    text-decoration: underline;
}

.btn--more:hover svg,
.btn--more:focus-visible svg {
    stroke: currentColor;
    animation: btn-more-arrow-move 0.32s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {

    .btn--more:hover svg,
    .btn--more:focus-visible svg {
        animation: none;
    }
}

/* /btn more */

/* btn ui */
.btn--ui,
a.btn--ui {
    border: none;
    background: none;
    padding: 0;
    width: var(--ui-size);
    height: var(--ui-size);
    color: var(--color-icon-grey);
    font-size: var(--size-text-note);
}

.btn--s.btn--ui,
.ui-s.btn--ui,
a.ui-s.btn--ui {
    padding: 0;
    width: var(--ui-size-s);
    height: var(--ui-size-s);
}

.btn--l.btn--ui,
.ui-l.btn--ui,
a.ui-l.btn--ui {
    padding: 0;
    width: var(--ui-size-l);
    height: var(--ui-size-l);
}

.btn--ui svg {
    stroke: currentColor;
    margin: 0;
}

.btn--ui:hover {
    background: var(--thover);
    color: var(--color-text);
}

/* /btn ui*/

/* btn micro */
.btn--micro,
a.btn--micro {
    padding: 0;
    font-size: var(--size-text-note);
    background: transparent;
    border: none;
    color: var(--color-icon-grey);
    height: auto;
}

.btn--micro svg {
    width: calc(var(--gf) * 2);
    height: calc(var(--gf) * 2);
    stroke: var(--color-icon-grey);
}

.btn--micro:hover {
    color: var(--color-text);
    background: none;
}

.btn--micro:hover svg {
    stroke: var(--color-text);
}

/* /btn micro */

/* btn disabled */
a.btn--disabled,
.btn--disabled,
.btn:disabled,
a.btn:disabled {
    color: var(--ui-color-text-disabled);
    background: var(--ui-input-bg-disabled);
    box-shadow: none;
    cursor: default;
    user-select: none;
}

a.btn--disabled:hover,
.btn--disabled:hover,
.btn:disabled:hover,
a.btn:disabled:hover {
    color: var(--ui-color-text-disabled);
    background: var(--ui-input-bg-disabled);
    cursor: default;
    box-shadow: none;
    user-select: none;
}

a.btn--disabled svg,
.btn--disabled svg,
.btn:disabled svg,
a.btn:disabled svg {
    stroke: var(--ui-color-text-disabled);
}

/* btn pan */
.btn-pan {
    display: flex;
    padding: calc(var(--gf) * 2) 0;
    margin: var(--gf) 0;
    gap: var(--gap);
}

.btn-pan--thin {
    padding: 0;
    margin: 0;
}

.btn-pan--center {
    justify-content: center;
}

.btn-pan--right {
    justify-content: flex-end;
}

.btn-pan--col {
    flex-flow: column;
}


/* /btn pan */

/*   (6) SP5 Forms ------- ------- ------- ------- ------- */
input {
    accent-color: var(--ui-color-primary);
}

.sf {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}

.sf__footer {
    margin-top: var(--gf);
}

.sf__form {}

.sf__fieldset {
    margin: 0;
    border: 1px solid rgba(0, 0, 0, 0.1);
    padding: 16px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: var(--gf);
    border-radius: calc(var(--ui-radius) * 2);
}

.sf__fieldset:not(:last-child) {
    margin-bottom: calc(var(--gap) * 1.5);
}

.sf__legend {
    font-size: var(--size-heading-xs);
    color: var(--color-primary);
    padding: var(--gf);
}

.sf__line {
    margin: 0 0 var(--gap) 0;
}

.sf .sf__line {
    margin: 0;
}

.sf__line:last-child {
    margin: 0;
}

.sf__label {
    display: flex;
    align-items: center;
    gap: calc(var(--gf) / 2);
    color: var(--ui-color-text);
}

.sf__label--col {
    flex-direction: column;
    align-items: flex-start;
}

.sf__label+.sf__input {
    margin-top: calc(var(--gf) / 2);
}

.sf__label+.sf__select {
    margin-top: calc(var(--gf) / 2);
}

.sf__label+.sf__textarea {
    margin-top: calc(var(--gf) / 2);
}

.sf__label:has(input:disabled) {
    color: var(--ui-color-text-disabled);
}

.sf__input,
.sf__textarea,
.sf__select {
    border: var(--ui-input-border);
    background: var(--ui-input-bg);
    color: var(--ui-color-text);
    font-size: 14px;
    border-radius: var(--ui-radius);
    width: 200px;
}

.sf__input.fw,
.sf__textarea.fw,
.sf__select.fw {
    width: 100%;
    max-width: 100%;
}

.sf__input--a,
.sf__textarea--a,
.sf__select--a {
    width: auto;
    max-width: 200px;
}

.sf__input {
    padding: 0 12px;
    height: var(--ui-size);
}

.sf__select {
    padding: 0 12px;
    height: var(--ui-size);

    /*todo appearance with arrows   */
    /*
        -moz-appearance: none;
        -webkit-appearance: none;
        appearance: none;*/
}

.sf__input:hover {
    border: var(--ui-input-border-hover);
}

.sf__textarea:hover {
    border: var(--ui-input-border-hover);
}

.sf__select:hover {
    border: var(--ui-input-border-hover);
}

button:focus,
.btn:focus,
a.btn:focus,
.sf__input:focus,
.sf__textarea:focus,
.sf__select:focus {
    outline: none;
}

button:focus-visible,
.btn:focus-visible,
a.btn:focus-visible,
.sf__input:focus-visible,
.sf__textarea:focus-visible,
.sf__select:focus-visible {
    box-shadow: var(--ui-shadow-focus);
}

.sf__select option {
    padding: 8px;
}

.sf__input::placeholder {
    color: var(--ui-color-placeholder);
    font-family: inherit;
}

.sf__textarea {
    padding: 8px;
    width: 100%;
}

.sf__textarea::placeholder {
    color: var(--ui-color-placeholder);
    font-family: inherit;
}

.sf__input--m,
.sf__select--m {
    width: 168px;
}

.sf__textarea--m {
    width: 75%;
}

.sf__input--s,
.sf__select--s {
    width: 92px;
}

.sf__textarea--s {
    width: 50%;
}

.sf__input--a,
.sf__select--a {
    width: fit-content;
}

.sf__input.ui-s,
.sf__select.ui-s {
    height: var(--ui-size-s);
}

.sf__input.ui-l,
.sf__select.ui-l {
    height: var(--ui-size-l);
}

.sf__select[multiple] {
    height: auto;
    overflow: hidden;
}

.sf__input[type="range"] {
    padding: 0;
}

.sf__input--error,
.sf__textarea--error,
.sf__select--error {
    box-shadow: var(--ui-shadow-error);
}

.sf__input--error::placeholder,
.sf__textarea--error::placeholder,
.sf__select--error::placeholder {
    color: var(--color-red);
}

/* SP Checkbox and Radio */

@supports (-webkit-appearance: none) or (-moz-appearance: none) {

    input[type=checkbox],
    input[type=radio] {
        --active-inner: var(--ui-input-bg);
        --focus: var(--color-primary);
        /*  --disabled: #F6F8FF;
          --disabled-inner: #E1E6F9;*/
        -webkit-appearance: none;
        -moz-appearance: none;
        height: 21px;
        outline: none;
        display: inline-block;
        vertical-align: top;
        position: relative;
        margin: 0;
        cursor: pointer;
        border: 1px solid var(--bc, var(--ui-color-border));
        background: var(--b, var(--ui-input-bg));
        transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
        flex-shrink: 0;
    }

    input[type=checkbox]:after,
    input[type=radio]:after {
        content: "";
        display: block;
        left: 0;
        top: 0;
        position: absolute;
        transition: transform 0.3s var(--d-t-e, ease), opacity var(--d-o, 0.2s);
    }

    input[type=checkbox]:checked,
    input[type=radio]:checked {
        --b: var(--ui-color-primary);
        --bc: var(--ui-color-border-active);
        --d-o: .3s;
        /* delay opacity */
        --d-t: .6s;
        /* delay transform */
        --d-t-e: cubic-bezier(.2, .85, .32, 1.2);
        /* delay ease */
    }

    input[type=checkbox]:disabled,
    input[type=radio]:disabled {
        --b: var(--ui-input-bg-disabled);
        cursor: not-allowed;
        opacity: 0.9;
    }

    input[type=checkbox]:disabled:checked,
    input[type=radio]:disabled:checked {
        --b: var(--ui-input-bg-disabled);
        --bc: var(--ui-color-border);
    }

    input[type=checkbox]:disabled+label,
    input[type=radio]:disabled+label {
        cursor: not-allowed;
    }

    input[type=checkbox]:hover:not(:checked):not(:disabled),
    input[type=radio]:hover:not(:checked):not(:disabled) {
        --bc: var(--ui-color-border-hover);
    }

    input[type=checkbox]:focus,
    input[type=radio]:focus {
        box-shadow: 0 0 0 var(--focus);
    }

    input[type=checkbox]:not(.sp-switch),
    input[type=radio]:not(.sp-switch) {
        width: 21px;
    }

    input[type=checkbox]:not(.sp-switch):after,
    input[type=radio]:not(.sp-switch):after {
        opacity: var(--o, 0);
    }

    input[type=checkbox]:not(.sp-switch):checked,
    input[type=radio]:not(.sp-switch):checked {
        --o: 1;
    }

    input[type=checkbox]+label,
    input[type=radio]+label {
        font-size: 14px;
        line-height: 21px;
        display: inline-block;
        vertical-align: top;
        cursor: pointer;
        margin-left: 4px;
    }

    input[type=checkbox]:not(.sp-switch) {
        border-radius: 8px;
    }

    input[type=checkbox]:not(.sp-switch):after {
        width: 5px;
        height: 9px;
        border: 2px solid var(--active-inner);
        border-top: 0;
        border-left: 0;
        left: 7px;
        top: 4px;
        transform: rotate(var(--r, 20deg));
    }

    input[type=checkbox]:not(.sp-switch):checked {
        --r: 43deg;
    }

    input[type=checkbox].sp-switch {
        width: 38px;
        border-radius: 11px;
    }

    input[type=checkbox].sp-switch:after {
        left: 2px;
        top: 2px;
        border-radius: 50%;
        width: 15px;
        height: 15px;
        background: var(--ab, var(--ui-color-border));
        transform: translateX(var(--x, 0));
    }

    input[type=checkbox].sp-switch:checked {
        --ab: var(--active-inner);
        --x: 17px;
    }

    input[type=checkbox].sp-switch:disabled:not(:checked):after {
        opacity: 0.6;
    }

    input[type=checkbox]:disabled:not(.sp-switch):after {
        border-color: var(--ui-color-border);
    }

    input[type=radio] {
        border-radius: 50%;
    }

    input[type=radio]:after {
        width: 19px;
        height: 19px;
        border-radius: 50%;
        background: var(--active-inner);
        opacity: 0;
        transform: scale(var(--s, 0.7));
    }

    input[type=radio]:checked {
        --s: .5;
    }

    input[type=radio]:disabled:after {
        background: var(--ui-color-border);
    }
}

/* /SP Checkbox and Radio */

/* radio-group */
.sp-radio-group {
    display: flex;
    align-items: stretch;
    justify-content: center;
    flex-wrap: wrap;
    row-gap: 4px;
}

.sp-radio-group__item {
    display: flex;
    align-items: stretch;
    justify-content: center;
}

.sp-radio-group input[type=radio] {
    clip: rect(0 0 0 0);
    clip-path: inset(100%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.sp-radio-group-item__text {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gf);

    cursor: pointer;
    background-color: var(--color-white);
    padding: var(--gf) var(--gap);
    position: relative;
    margin-left: -1px;
    border: var(--ui-input-border);
    letter-spacing: .05em;
    color: var(--ui-color-text);
    text-align: center;
    transition: background-color .3s ease;
}

.sp-radio-group-item__text svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: var(--ui-color-text);
}

.sp-radio-group input[type="radio"]:checked+.sp-radio-group-item__text {
    border: 1px solid var(--ui-color-border-active);
    background-color: var(--ui-input-bg-active);
    z-index: 1;
    color: var(--ui-color-text-active);
}

.sp-radio-group input[type="radio"]:checked+.sp-radio-group-item__text svg {
    stroke: currentColor;
}

.sp-radio-group__item:first-child .sp-radio-group-item__text {
    border-radius: var(--gf) 0 0 var(--gf);
}

.sp-radio-group__item:last-child .sp-radio-group-item__text {
    border-radius: 0 var(--gf) var(--gf) 0;

}

/* Disabled */
.sp-radio-group input[type=radio]:disabled+.sp-radio-group-item__text {
    background: var(--ui-input-bg-disabled);
    color: var(--ui-color-text-disabled);
    cursor: default;
    user-select: none;
}

/* /radio-group */

/* SP Radio Toggle */
.sp-radio-toggle {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    padding: 4px;
    border-radius: calc(var(--ui-size) / 2);
    background: var(--ui-input-bg-disabled);
    font-size: var(--size-text-note);
    transition: var(--ui-trans);
    color: var(--ui-color-text);
    width: fit-content;
    height: var(--ui-size);
}

.sp-radio-toggle .sp-radio-toggle__label {
    flex: 1 1 auto;
    text-align: center;
}

.sp-radio-toggle .sp-radio-toggle__label input {
    opacity: 0;
    position: absolute;
    width: 0;
}

.sp-radio-toggle .sp-radio-toggle__label .sp-radio-toggle__text {
    height: calc(var(--ui-size) - 8px);
    display: flex;
    align-items: center;
    justify-content: start;
    gap: var(--gf);
    border-radius: var(--gap);
    padding: 0 var(--gf);
    transition: all .15s ease-in-out;
    color: var(--ui-color-text-disabled);
    cursor: pointer;
}

.sp-radio-toggle .sp-radio-toggle__label .sp-radio-toggle__text:hover {
    background: rgba(255, 255, 255, 0.6);
    color: var(--ui-color-text-hover);
}

.sp-radio-toggle .sp-radio-toggle__label input:checked+.sp-radio-toggle__text {
    background: var(--ui-color-primary);
    color: var(--color-white);
}

.sp-radio-toggle .sp-radio-toggle__label input:checked+.sp-radio-toggle__text:hover {
    background: var(--ui-color-primary-hover);
    color: var(--color-white);
}

/* /SP Radio Toggle */

/* SP Radio Box    */
.sp-radio-box-wrapper {
    display: flex;
    justify-content: start;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--gf);

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.sp-radio-box__input:checked+.sp-radio-box-card {
    border-color: var(--ui-shadow-focus);
    color: var(--ui-color-border-active);
}

.sp-radio-box__input:checked+.sp-radio-box-card:before {
    transform: scale(1);
    opacity: 1;
    background-color: var(--ui-color-primary-active);
    border-color: var(--ui-color-border-active);
}


.sp-radio-box__input:checked+.sp-radio-box-card .sp-radio-box__text {
    color: var(--ui-color-text-active);
}

.sp-radio-box__input:focus+.sp-radio-box-card {
    border-color: var(--ui-color-border-active);
    box-shadow: var(--ui-shadow-focus);
}

.sp-radio-box__input:focus+.sp-radio-box-card:before {
    transform: scale(1);
    opacity: 1;
}

.sp-radio-box-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    width: 80px;
    height: 80px;
    padding: 4px;
    border-radius: var(--gf);
    border: var(--ui-input-border);
    background-color: var(--color-white);
    transition: var(--ui-trans);
    cursor: pointer;
    position: relative;
}

.sp-radio-box-card:before {
    content: "";
    position: absolute;
    display: block;
    width: 0.75rem;
    height: 0.75rem;
    border: var(--ui-input-border);
    background-color: #fff;
    border-radius: 50%;
    top: 0.25rem;
    left: 0.25rem;
    opacity: 0;
    transform: scale(0);
    transition: var(--ui-trans);
}

.sp-radio-box-card:hover {
    border: var(--ui-input-border-hover);
}

.sp-radio-box-card:hover:before {
    transform: scale(1);
    opacity: 1;
}

.sp-radio-box-card__example {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.sp-radio-box-card__example img {
    width: 40px;
    height: 40px;
}

.sp-radio-box__text {
    color: var(--ui-color-text-grey);
    transition: 0.375s ease;
    text-align: center;
    font-size: 12px;
    line-height: 1;
}

input[type="radio"].sp-radio-box__input {
    clip: rect(0 0 0 0);
    clip-path: inset(100%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
    outline: 1px solid red;
}

/* /SP Radio Box    */

.sp-tab-sections-group {}

.sp-tab-section {
    display: none;
}

.sp-tab-section--active {
    display: block;
}

/* SP Chips */
.sp-chips-pan {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gf);
}

.sp-chip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap);
    padding: 4px 4px 4px var(--gap);
    border-radius: var(--gap);
    background: rgba(0, 0, 0, 0.05);
    font-size: var(--size-text-note);
    transition: var(--ui-trans);
    cursor: pointer;
    color: rgba(0, 0, 0, 0.6);
}

.sp-chip:hover {
    background: rgba(0, 0, 0, 0.1);
    color: rgba(0, 0, 0, 0.8);
}

.sp-chip svg {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.1);
    width: 20px;
    height: 20px;
    padding: 2px;
    fill: none;
    stroke: rgba(0, 0, 0, 0.42);
    flex-shrink: 0;
}

.sp-chip:hover svg {
    stroke: rgba(0, 0, 0, 0.6);
}

.sp-chip--disabled {
    outline: 1px solid rgba(0, 0, 0, 0.1);
    background: transparent;
    color: rgba(0, 0, 0, 0.3);
}

.sp-chip--disabled:hover {
    background: transparent;
    cursor: auto;
    color: rgba(0, 0, 0, 0.3);
}

.sp-chip--disabled svg {
    opacity: 0.2;
}

.sp-chip--disabled:hover svg {
    opacity: 0.2;
}

/* /SP Chips */

/* SP Toggle */
.sp-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    padding: 4px;
    border-radius: calc(var(--ui-size) / 2);
    background: var(--ui-bg-100);
    font-size: var(--size-text-note);
    transition: var(--ui-trans);
    cursor: pointer;
    color: var(--ui-color-text);
    width: fit-content;
    height: var(--ui-size);
}

.sp-toggle__item {
    height: calc(var(--ui-size) - 8px);
    display: flex;
    align-items: center;
    justify-content: start;
    gap: var(--gf);
    border-radius: var(--gap);
    padding: 0 var(--gf);
    transition: var(--ui-trans);
    color: var(--ui-color-text-light-grey);
}

.sp-toggle__item:hover {
    background: rgba(255, 255, 255, 0.6);
    color: var(--ui-color-text-grey);
}

.sp-toggle__item--active,
.sp-toggle__item--active:hover {
    background: var(--color-white);
    color: var(--ui-color-text);
}

/* /SP Toggle */


/*   (7) SP5 Typographic ------- ------- ------- ------- ------- */
h1,
h2,
h3,
h4,
h5 {
    font-family: var(--wf2);
    margin: 0;
    padding: 16px 0;
    font-weight: bold;
}

h1 {
    font-size: var(--size-heading-xl);
    padding: calc(var(--size-heading-xl) / 2) 0;
}

h2 {
    font-size: var(--size-heading-l);
    padding: calc(var(--size-heading-l) / 2) 0;
}

h3 {
    font-size: var(--size-heading-m);
    padding: calc(var(--size-heading-m) / 2) 0;
}

h4 {
    font-size: var(--size-heading-s);
    padding: calc(var(--size-heading-s) / 2) 0;
}

h5 {
    font-size: var(--size-heading-xs);
    padding: calc(var(--size-heading-xs) / 2) 0;
}

p {
    line-height: 1.2;
}

/*   (8) SP5 Components ------- ------- ------- ------- ------- */
/* Product card
------- ------- ------- */
.pcard {
    text-align: center;
    background: var(--color-white);
    color: var(--color-text);
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-between;
    max-width: 300px;
}

.pcard:hover {
    transition: all 0.2s;
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
}

.pcard__body {
    position: relative;
}

.pcard__body,
.pcard__footer {
    width: 100%;
    padding: var(--gap);
}

.pcard__footer {
    padding: 0 16px 16px 16px;
}

.pcard__img {
    width: 100%;
    height: 190px;
    object-fit: cover;
}

.pcard__title {
    font-family: var(--wf2);
    font-size: var(--size-heading-xs);
    font-weight: bold;
    padding: 6px 0;
}

.pcard__price {
    margin: 16px 0;
    text-align: center;
    font-size: var(--size-heading-s);
    color: var(--color-text);
    height: 46px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.pcard__old-price {
    display: block;
    color: var(--color-text-grey);
    text-decoration: line-through;
    font-size: var(--size-text-note);
    text-align: center;
}

.pcard__notexist {
    text-align: center;
    font-size: var(--size-heading-s);
    color: var(--color-red);
}

.pcard__pad {
    padding: 8px 0;
    text-align: center;
}

a.pcard__btn {
    display: inline-flex;
    background: var(--color-primary);
    color: var(--color-white);
    cursor: pointer;
    padding: 6px 24px;
    border-radius: 4px;
    border: none;
    text-align: center;
    transition: var(--trans);
    box-shadow: 0 0 0 rgba(0, 0, 0, 0.3);
}

a.pcard__btn:hover {
    background: var(--color-primary);
    color: var(--color-white);
    transition: var(--trans);
}

.pcard-icon {
    width: 24px;
    height: 20px;
    background-size: cover;
    margin: 0 4px;
}

.label-box {
    position: absolute;
    top: 24px;
    left: 0;
    display: flex;
    flex-direction: column;
}

.label {
    margin: 0 0 8px 0;
}

.label--new {
    background: var(--color-secondary);
    color: var(--color-text);
    box-sizing: border-box;
    padding: 4px 32px;
}

.label--hit {
    width: 33px;
    height: 16px;
    background-size: cover;
}

.label--discount {
    width: 93px;
    height: 16px;
    background-size: cover;
}

@media screen and (max-width: 768px) {
    .pcard {
        margin: 0 16px;
    }
}

/* /Product card */

/* Crumbs
------- ------- ------- */
.breadcrumb {
    font-size: var(--size-text-note);
    line-height: 120%;
    color: var(--color-text-grey);
    margin: 24px 0 16px 0;
    padding: 0;
    display: inline-flex;
    gap: var(--gf);
}

.breadcrumb a {
    color: var(--color-link);
}

.breadcrumb a:hover {
    color: var(--color-link-hover);
}

.breadcrumb li {
    list-style: none;
}

.breadcrumb li:after {
    content: '/';
    margin: 0 0 0 6px;
    color: var(--color-text-grey);
}

.breadcrumb li:last-child:after {
    content: '';
}

/* /Crumbs */

/* Pagination */
.pagination-nav {
    display: flex;
    justify-content: center;
}

.pagination {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: var(--gf);
}

.pagination li {
    margin: 0 1px;
}

.pagination a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5em 1em;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: var(--ui-radius);
    text-decoration: none;
    color: var(--color-text);
    height: var(--ui-size-s);
    font-size: var(--size-text-note);

}

.pagination a:hover {
    border: 1px solid rgba(0, 0, 0, 0.4);
}

.pagination svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
}

.pagination a[aria-current="page"] {
    background-color: var(--color-primary);
    color: var(--color-white);
}

/* /Pagination */

/* Summary */
summary {
    cursor: pointer;
}

.sp-details {
    background: var(--color-white);
    border-radius: var(--ui-radius);
    transition: var(--ui-trans);
}

.sp-details:hover {
    box-shadow: var(--sp-shadow-l);
}

.sp-summary {
    cursor: pointer;
    list-style: none;
    background: var(--color-white);
    transition: var(--ui-trans);
    padding: var(--gap);
    border-radius: var(--ui-radius);
    border-bottom: 1px solid transparent;
    display: flex;
    align-items: center;
    justify-content: start;
    gap: var(--gf);
}

.sp-summary::after {
    content: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M9 18L15 12L9 6" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    color: var(--color-text-grey);
    display: flex;
    align-items: start;
    justify-content: start;
    width: 24px;
    height: 24px;
}

.sp-summary:hover {
    background: var(--ui-bg-100);
}

.sp-details[open] .sp-summary {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.sp-details[open] .sp-summary::after {
    transform: rotate(90deg);
}

.sp-summary::-webkit-details-marker {
    display: none;
}

.sp-details__body {
    padding: var(--gap);
}

/* /Summary */

/*   (9) SP5 Basic Layout ------- ------- ------- ------- ------- */

/* for fixed footer */
.body {
    min-height: 100%;
    display: grid;
    grid-template-rows: auto 1fr auto;
}

/* /for fixed footer */

/* Header
------- ------- ------- */
.header-nest {
    height: calc(64px + var(--gap) * 2);
}

.header-wrapper {
    padding: var(--gap);
    position: fixed;
    width: 100%;
    z-index: 100;
    top: 16px;
}

.header {
    margin: 0 auto;
    width: fit-content;
    display: flex;
    align-items: center;
    /* justify-content: space-between; */
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.6);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    height: 64px;
    border-radius: 32px;
    padding: 0 8px;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
}

.compact-header .header {
    background: rgba(255, 255, 255, 0.65);
}

.header__left {
    /* outline: 1px solid red; */
}

.header-logo {
    display: flex;
    align-items: center;
    overflow: hidden;
}

body[data-header-mode="animated"] .header-logo {
    width: 0;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

body[data-header-mode="animated"].logo-at-header .header-logo,
body[data-header-mode="animated"].logo-flying .header-logo {
    width: 152px;
}

body[data-header-mode="static"] .header-logo {
    width: 152px;
}

.header-logo__img {
    width: 120px;
    min-width: 120px;
    margin: 0 16px;
    opacity: 0;
    pointer-events: none;
}

body[data-header-mode="static"] .header-logo__img {
    opacity: 1;
    pointer-events: auto;
}

.header__center {}

.header__right {}

/* /Header */

/* MAIN NAV
------- ------- ------- */
.mobnav__text {
    margin: 0 0 0 8px;
}

.nav {
    display: flex;
    align-items: center;
    gap: var(--gap);
    padding: 8px 4px;
}

.compact-header .nav {
    padding: 4px 4px;
}


.nav a {
    color: var(--color-primary);
    transition: var(--trans);
    font-family: var(--wf2);
    font-size: 32px;
    padding: 4px 24px;
    border-radius: 22px;
}

.nav a:hover {
    color: var(--color-primary);
    background: rgba(255, 255, 255, 0.32);
}

.nav a.active {
    background: rgba(255, 255, 255, 0.6);
}

.nav ul {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--gap);
    padding: 0;
}

.mobnav {
    display: none;
    /*display: flex;*/
    align-items: center;
    padding: 8px 0;
    background-color: transparent;
    border: none;
    cursor: pointer;
}

.mobnav__icon {}

.menu-icon-wrapper {
    width: 18px;
    display: block;
}

.menu-icon {
    display: block;
    width: 18px;
    height: 2px;
    transition: all 0.2s;
    background: var(--color-text);
}

.menu-icon__top {
    transition: all 0.2s;
}

.menu-icon__middle {
    transition: all 0.2s;
    margin: 3px 0;
}

.menu-icon__bottom {
    transition: all 0.2s;
}

.mobnav--active .menu-icon__bottom {
    transform: translate(0, -1px) rotate(45deg);
    transition: all 0.2s;
}

.mobnav--active .menu-icon__middle {
    background: rgba(255, 255, 255, 0);
    height: 0;
    margin: 0;
    transition: all 0.2s;
}

.mobnav--active .menu-icon__top {
    transform: translate(0, 1px) rotate(-45deg);
    transition: all 0.2s;
}

.mob-header {
    display: none;
}

@media screen and (max-width: 768px) {
    .header-nest {
        height: auto;
        min-height: calc(64px + var(--gap) * 2);
    }

    .header {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "logo toggle"
            "menu menu";
        align-items: center;
        width: calc(100% - var(--gap) * 2);
        max-width: 100%;
        height: auto;
        padding: 4px 6px;
        border-radius: 24px;
        gap: 0;
    }

    .header__left {
        grid-area: logo;
        min-width: 0;
    }

    .header__center {
        display: contents;
    }

    .nav {
        display: contents;
    }

    .mobnav {
        display: flex;
        grid-area: toggle;
        justify-self: end;
        padding: 8px 4px;
    }

    body[data-header-mode="animated"] .header-logo,
    body[data-header-mode="static"] .header-logo {
        width: 120px;
        transition: none;
    }

    body[data-header-mode="animated"] .header-logo__img,
    body[data-header-mode="static"] .header-logo__img {
        width: 66px;
        min-width: 66px;
        margin: 0 8px;
        opacity: 1;
        pointer-events: auto;
    }

    .logo-combination__logo.is-at-header,
    .logo-combination__logo.is-flying {
        position: absolute;
        top: 0;
        left: 0;
        width: auto;
        height: auto;
        visibility: visible;
    }

    .nav ul {
        display: none;
        grid-area: menu;
        width: 100%;
        margin: 0;
        padding: 12px 4px 4px;
        border-top: 1px solid rgba(255, 255, 255, 0.5);
    }

    .main-nav--active ul {
        display: block;
    }

    .main-nav--active li {
        float: none;
        margin: 0;
    }

    .main-nav--active li+li {
        margin-top: 4px;
    }

    .nav a {
        display: block;
        font-size: 24px;
        padding: 8px 16px;
    }
}

/* /MAIN NAV */

/* Main, Page, Aside
------- ------- ------- */
.page {
    width: 100%;
    max-width: var(--wid);
    margin: 0 auto;
    padding: 0 var(--gf);
}

.main {
    padding-top: 24px;
}


/* /Main, Page, Aside */

/* Footer
------- ------- ------- */
.footer-wrapper {}

.footer {
    color: var(--color-text-grey);
    font-size: var(--size-text-note);
    line-height: 1.4;
    padding: var(--gap) 0;
}

.footer__left {}

.footer__center {
    color: var(--color-text-grey);
}

.footer__right {
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    padding: 8px;
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: var(--gap);
    filter: grayscale(100%);
    transition: var(--trans);
}

.footer-logo:hover {
    filter: none;

}

.footer-logo__img {
    width: 2rem;
}

.footer-logo__text {}

.footer__center {}

.footer__right {}

/* /Footer */

/* (10) TPL Start:
------- ------- ------- ------- ------- ------- -------*/

.hero-section {
    padding-top: 24px;
    margin-bottom: 48px;
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: var(--gap);
    align-items: center;
}

.hero-section__left {
    padding: 0 16px;
}

.hero-section__right {
    min-width: 0;
}

.hero-section__desc {
    max-width: 380px;
    padding: 0 16px;
}

.logo-combination {
    position: relative;
}

.logo-combination__logo {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    max-width: 100%;
}

.logo-combination__logo.is-flying {
    position: fixed;
    z-index: 200;
    margin: 0;
    object-fit: contain;
    transform-origin: top left;
    pointer-events: none;
    transition:
        top 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        left 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        width 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.logo-combination__logo.is-at-header {
    position: fixed;
    z-index: 200;
    margin: 0;
    object-fit: contain;
    pointer-events: none;
}

.logo-combination__logo-placeholder {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    visibility: hidden;
    pointer-events: none;
}

body.logo-flying .logo-combination__logo-placeholder,
body.logo-at-header .logo-combination__logo-placeholder {
    display: block;
}

.logo-combination__type {
    display: block;
    max-width: 100%;
    opacity: 1;
    transform: translateX(0);
    transition:
        opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

body.logo-type-hidden .logo-combination__type {
    opacity: 0;
    transform: translateX(40px);
    pointer-events: none;
}

.video-card {
    background: var(--color-white);
    border-radius: 16px;
    /* Horizontal shadow extent must stay <= 8px (slider clip expansion),
       vertical can be larger for depth */
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.08),
        0 4px 8px -2px rgba(0, 0, 0, 0.08),
        0 12px 20px -12px rgba(0, 0, 0, 0.18);
    height: 100%;
    transition: opacity .18s ease, transform .18s ease;
}

.video-card.is-hiding {
    opacity: 0;
    transform: scale(.96);
}

.video-card[hidden] {
    display: none;
}

.video-card__video {
    border-radius: 12px;
}

.video-card-body {
    padding: 12px;
}

.video-card__title {
    font-family: var(--wf2);
    font-size: 24px;
    line-height: 1.2;
    margin: 8px 0;
    color: var(--color-text);
    color: var(--color-text);
}

.video-card__desc {
    color: var(--color-text-grey);
    font-size: var(--size-text-s);
    line-height: 1.5;
    margin-bottom: 4px;
    text-align: justify;

}

.video-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 8px 0 0 0;
}

/* Empty state card: filters returned no videos */
.video-card--empty {
    background: transparent;
    box-shadow: none;
    border: 2px dashed rgba(0, 0, 0, 0.18);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px 32px;
    min-height: 320px;
}

.video-card-empty__icon {
    width: 56px;
    height: 56px;
    stroke: rgb(141, 141, 141);
    fill: none;
    margin-bottom: 16px;
}

.video-card--empty .video-card__title {
    margin: 0 0 8px;
}

.video-card--empty .video-card__desc {
    max-width: 42ch;
}

.video-card-empty__reset {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 20px;
    font-family: var(--wf2);
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.4);
    text-decoration: none;
    border-bottom: 1px dotted currentColor;
    transition: var(--trans);
}

.video-card-empty__reset:hover {
    color: rgba(0, 0, 0, 1);
}

/* Articles grid — only placement by children count
------- ------- ------- */
.article-list {
    padding: 24px 0;
}

.article-list--blue {
    --article-list-bg: #D5E3E5;
    background: var(--article-list-bg);
    position: relative;
    margin: 108px auto;
    width: 100%;
    padding: 0 var(--gap);
}

/* Градиенты снаружи блока — иначе transparent = тот же фон родителя */
.article-list--blue::before,
.article-list--blue::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 48px;
    pointer-events: none;
}

.article-list--blue::before {
    top: -48px;
    background-image: linear-gradient(to bottom, transparent, var(--article-list-bg));
}

.article-list--blue::after {
    bottom: -48px;
    background-image: linear-gradient(to top, transparent, var(--article-list-bg));
}

.articles-intro {
    max-width: var(--wid);
    margin: 0 auto;
    padding: var(--gap);
    font-size: var(--size-text-s);
    line-height: 1.5;
}

.articles-line-grid {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    max-width: 1000px;
    margin: 0 auto;
}

/* Ограниченная высота только у обычных карточек статей */
.articles-line-grid .article-card:not(.article-card--soon) {
    height: 282px;
    max-height: 282px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.articles-line-grid .article-card__layout {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
}

.articles-line-grid .article-card__media {
    position: relative;
    min-height: 0;
    height: auto;
    align-self: stretch;
}

.articles-line-grid .article-card__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
}

.articles-grid {
    max-width: var(--wid);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap);
}

/* 3 items: 1 | 2 / 3 */
.articles-grid>*:nth-child(1) {
    grid-column: span 1;
}

.articles-grid>*:nth-child(2) {
    grid-column: span 2;
}

.articles-grid>*:nth-child(3) {
    grid-column: span 3;
}

/* 4 items: 1 | 2 / 2 | 1 */
.articles-grid:has(> *:nth-child(4))>*:nth-child(3) {
    grid-column: span 2;
}

.articles-grid:has(> *:nth-child(4))>*:nth-child(4) {
    grid-column: span 1;
}

/* Article card — independent of grid, reacts to own width
------- ------- ------- */
.article-card {
    container-type: inline-size;
    container-name: article-card;
    display: block;
    padding: 12px;
    background: var(--color-white);
    border-radius: 16px;
    text-decoration: none;
    color: inherit;
    box-shadow: var(--sp-shadow-s);
    min-width: 0;
    height: 100%;
    transition: box-shadow 0.2s ease;
}

.article-card:hover {
    box-shadow: var(--sp-shadow-m);
}

.article-card__layout {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    height: 100%;
}

.article-card__media {
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: var(--ui-bg-200);
    flex-shrink: 0;
}

.article-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.45s ease;
}

.article-card__media:hover img,
.article-card__media:focus-visible img {
    transform: scale(1.05);
}

.article-card__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
    min-width: 0;
}

.article-card__title {
    font-family: var(--wf2);
    font-size: 28px;
    line-height: 1.15;
    color: var(--color-primary);
}

.article-card__desc {
    font-size: var(--size-text-s);
    line-height: 1.5;
    color: var(--color-text-grey);
    text-align: justify;
}

/* Карточка-тизер: не похожа на статью — ниже, dashed, компактная */
.article-card--soon {
    height: auto;
    max-height: none;
    padding: 18px 20px;
    background: rgba(255, 255, 255, 0.45);
    border: 1px dashed rgba(49, 31, 27, 0.28);
    box-shadow: none;
    pointer-events: none;
}

.article-card--soon:hover {
    box-shadow: none;
}

.article-card--soon .article-card__layout {
    flex-direction: row;
    align-items: center;
    gap: 16px;
    height: auto;
}

.article-card--soon .article-card__title {
    font-size: 22px;
}

.article-card--soon .article-card__body {
    width: 100%;
    gap: 6px;
}

.article-soon__waves {
    /* Настройки волн */
    --article-soon-wave-amplitude: 8px;
    --article-soon-wave-period: 24px;
    --article-soon-wave-color: rgba(0, 0, 0, 0.24);
    --article-soon-wave-duration: 1.8s;
    --article-soon-wave-height: calc(var(--article-soon-wave-amplitude) * 2 + 2px);
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 6px 0;
    background: transparent;
    border-radius: 8px;
    overflow: hidden;
}

.article-soon__waves::before {
    content: "";
    display: block;
    width: 100%;
    height: var(--article-soon-wave-height);
    background-color: var(--article-soon-wave-color);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -1 48 26'%3E%3Cpath d='M0 12 Q12 0 24 12 T48 12' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -1 48 26'%3E%3Cpath d='M0 12 Q12 0 24 12 T48 12' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    -webkit-mask-position: 0 center;
    mask-position: 0 center;
    -webkit-mask-repeat: repeat-x;
    mask-repeat: repeat-x;
    -webkit-mask-size: var(--article-soon-wave-period) var(--article-soon-wave-height);
    mask-size: var(--article-soon-wave-period) var(--article-soon-wave-height);
    animation: article-soon-waves var(--article-soon-wave-duration) linear infinite;
}

@keyframes article-soon-waves {
    to {
        -webkit-mask-position: calc(-1 * var(--article-soon-wave-period)) center;
        mask-position: calc(-1 * var(--article-soon-wave-period)) center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .article-soon__waves::before {
        animation: none;
    }
}

/* Wide enough → image left (full height), text right (top-aligned) */
@container article-card (min-width: 560px) {
    .article-card__layout {
        flex-direction: row;
        align-items: stretch;
    }

    .article-card__media {
        flex: 0 0 48%;
        width: 48%;
        aspect-ratio: auto;
        align-self: stretch;
        min-height: 0;
    }

    .article-card__body {
        flex: 1;
        align-self: flex-start;
        padding-top: 4px;
    }

    .article-card--soon .article-card__body {
        padding-top: 0;
        align-self: center;
    }
}

.vc-tag {
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ui-bg-100);
    border-radius: 16px;
    padding: 4px 12px;
    font-family: var(--wf2);
    text-transform: uppercase;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

/* Shine sweep on hover, runs once per hover */
.vc-tag::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 60%;
    height: 100%;
    background: linear-gradient(105deg,
            transparent 0%,
            rgba(255, 255, 255, 0.75) 50%,
            transparent 100%);
    transform: translateX(-180%) skewX(-20deg);
    pointer-events: none;
}

.vc-tag:hover::after {
    animation: vc-tag-shine 0.65s ease;
}

@keyframes vc-tag-shine {
    from {
        transform: translateX(-180%) skewX(-20deg);
    }

    to {
        transform: translateX(320%) skewX(-20deg);
    }
}

.vc-tag--champs {
    background: var(--color-primary);
    color: var(--color-white);
}

.vc-tag--trainers {
    background: var(--color-green);
    color: var(--color-white);
}

.vc-tag--func {
    background: #F54D29;
    color: var(--color-white);
}

.vc-tag--olympic {
    background: #9945F3;
    color: var(--color-white);
}

.vc-tag--front {
    background: #766E3A;
    color: var(--color-white);
}

/* Video slider */
.video-slider {
    width: auto;
    max-width: none;
    min-width: 0;
    --video-slider-gap: 16px;
    /* Clip happens here (not on viewport) with an expanded box,
       so card shadows have room and don't get cut off.
       Horizontal expansion must stay <= half of --video-slider-gap,
       otherwise the neighboring slide's shadow leaks into view. */
    overflow: hidden;
    padding: 40px 8px;
    margin: -40px -8px;
}

.video-slider-viewport {
    overflow: visible;
    width: 100%;
    touch-action: pan-y;
}

.video-slider-body {
    display: flex;
    gap: var(--video-slider-gap);
    transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

.video-slider-item {
    flex: 0 0 auto;
    min-width: 0;
    box-sizing: border-box;
}



.video-slider-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    min-height: 26px;
    /* outline: 1px solid red; */
    margin: 16px 0 0 0;
}

.video-slider-nav__bullet {

    width: 12px;
    height: 12px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--color-text-light-grey);
    cursor: pointer;
    transition: var(--trans);
    flex-shrink: 0;
}

.video-slider-nav__bullet:hover {
    background: var(--color-text-grey);
}

.video-slider-nav__bullet.is-active {
    background: var(--color-primary);
    transform: scale(1.2);
}

/* Article tips carousel
------- ------- ------- */
.article-tips {
    --tips-card-bg: #ebebeb;
    --tips-card-bg-back: #d4d4d4;
    --tips-back-rotate: 1deg;
    --tips-anim: 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    --tips-anim-out: 0.38s cubic-bezier(0.33, 0, 0.2, 1);
    --tips-anim-in: 0.42s cubic-bezier(0.16, 1, 0.3, 1);
    width: 100%;
    max-width: 100%;
    margin: 40px 0;
}

.article-tips__stack {
    --tips-peek: 8px;
    position: relative;
    /* место сверху под выглядывающую заднюю карточку */
    padding: var(--tips-peek) 14px 0 0;
    overflow: visible;
}

.article-tips__stack::before {
    content: '';
    position: absolute;
    /* меньше передней: уже по бокам, ниже по высоте, выглядывает сверху-справа */
    top: 0;
    left: 22px;
    right: 6px;
    bottom: 18px;
    border-radius: 14px;
    background: var(--tips-card-bg-back);
    box-shadow: var(--sp-shadow-s);
    transform: rotate(var(--tips-back-tilt, 1.5deg));
    transform-origin: 100% 100%;
    z-index: 0;
    pointer-events: none;
    transition:
        transform var(--tips-anim-out),
        box-shadow var(--tips-anim-out);
}

/* во время смены задняя выпрямляется против часовой к горизонтали */
.article-tips__stack.is-swapping::before {
    transform: rotate(0deg);
    box-shadow: var(--sp-shadow-m);
}

.article-tips__deck {
    position: relative;
    z-index: 1;
    width: 100%;
    overflow: visible;
}

.article-tips__slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-height: 100%;
    overflow: hidden;
    padding: 28px 32px;
    background: var(--tips-card-bg);
    border-radius: 16px;
    box-shadow: var(--sp-shadow-s);
    /* ось сверху — поворот не выталкивает низ карточки вниз */
    transform-origin: 80% 0%;
    transform: rotate(calc(var(--tips-back-rotate) + 0.5deg)) translateX(6px);
    opacity: 0;
    pointer-events: none;
    z-index: 0;
    box-sizing: border-box;
    /* анимируем только GPU-friendly свойства */
    transition:
        transform var(--tips-anim),
        opacity var(--tips-anim);
}

.article-tips__slide.is-front {
    top: 0;
    opacity: 1;
    z-index: 3;
    background: var(--tips-card-bg);
    transform: rotate(0deg) translateX(0);
    box-shadow: var(--sp-shadow-m);
    pointer-events: auto;
    overflow: visible;
    will-change: transform, opacity;
    transition:
        transform var(--tips-anim-in),
        opacity var(--tips-anim-in);
}

/* старт проявления следующей карточки */
.article-tips__slide.is-front.is-entering {
    opacity: 0;
    transform: rotate(1.2deg) translateX(10px);
    pointer-events: none;
}

.article-tips__slide.is-idle {
    top: 0;
    opacity: 0;
    z-index: 0;
    background: var(--tips-card-bg);
    transform: rotate(4deg) translateX(18px);
    pointer-events: none;
}

/* передняя: поворот вправо + fade вместе с текстом */
.article-tips__slide.is-leaving {
    top: 0;
    opacity: 0;
    z-index: 5;
    background: var(--tips-card-bg);
    transform: rotate(5deg) translateX(22px);
    box-shadow: var(--sp-shadow-xs);
    pointer-events: none;
    will-change: transform, opacity;
    transition:
        transform var(--tips-anim-out),
        opacity var(--tips-anim-out);
}

/* уважаем системную настройку «меньше движения» */
@media (prefers-reduced-motion: reduce) {
    .article-tips__slide {
        transition: opacity 0.2s linear !important;
        transform: none !important;
    }
}

.article-tips__title {
    font-family: var(--wf2);
    font-size: clamp(1.5rem, 2.5vw, 1.875rem);
    line-height: 1.15;
    color: var(--color-primary);
    margin: 0 0 12px;
    font-weight: normal;
}

.article-tips__text {
    margin: 0;
    font-size: 1rem;
    line-height: 1.55;
    color: var(--color-text);
    text-align: left;
}

.article-tips__nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    margin-top: 14px;
}

.article-tips__dots {
    display: flex;
    align-items: center;
    gap: 8px;
}

.article-tips__dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--ui-bg-300);
    cursor: pointer;
    transition: var(--trans);
    flex-shrink: 0;
}

.article-tips__dot:hover {
    background: var(--color-text-light-grey);
}

.article-tips__dot.is-active {
    background: var(--color-primary);
}

.article-tips__arrows {
    display: flex;
    align-items: center;
    gap: 8px;
}

.article-tips__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--ui-bg-300);
    border-radius: 10px;
    background: var(--ui-bg-100);
    color: var(--color-primary);
    cursor: pointer;
    transition: var(--trans);
}

.article-tips__arrow:hover {
    background: var(--ui-bg-200);
    border-color: var(--color-text-light-grey);
}

.article-tips__icon {
    display: block;
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
}

/* Team roster (состав сборной)
------- ------- ------- */
.team {
    width: 100%;
    max-width: 100%;
    margin: 40px 0;
}

.team__inner {
    padding: 36px 40px 32px;
    background: var(--ui-bg-100);
    border: 1px solid var(--ui-bg-300);
    border-radius: 16px;
    box-sizing: border-box;
}

.team__header {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 24px;
    flex-wrap: wrap;
    border-bottom: 2px solid var(--ui-bg-300);
    padding-bottom: 20px;
    margin-bottom: 28px;
}

/* Заголовок по центру вертикали относительно блока с годом */
.team__intro {
    display: flex;
    align-items: center;
    min-width: 0;
}

.team__label {
    font-family: var(--wf2);
    font-size: 1rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-grey);
    margin-bottom: 8px;
    font-weight: normal;
}

.team__title {
    margin: 0;
    font-family: var(--wf2);
    /* Размер как у .team__year: по умолчанию 28px */
    font-size: clamp(1.5rem, 2.5vw, 1.75rem);
    line-height: 1.15;
    font-weight: normal;
    color: var(--color-primary);
    letter-spacing: 0.02em;
    padding: 0;
}

.team__meta {
    text-align: right;
    flex-shrink: 0;
}

.team__year {
    font-family: var(--wf2);
    font-size: clamp(1.5rem, 2.5vw, 1.75rem);
    font-weight: normal;
    color: var(--color-primary);
    line-height: 1;
    letter-spacing: 0.02em;
}

.team__achievement {
    font-size: var(--size-text-note);
    color: var(--color-text-grey);
    font-weight: 600;
    letter-spacing: 0.02em;
}

.team__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 28px;
    row-gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.team__list--staff {
    row-gap: 10px;
}

.team__player,
.content .team__player {
    margin: 0;
    padding: 0;
    font-size: 1rem;
    line-height: 1.3;
}

.team__player::before {
    display: none;
}

.team__firstname {
    color: var(--color-text-grey);
}

.team__lastname {
    color: var(--color-primary);
    font-weight: 700;
}

.team__staff {
    margin-top: 30px;
    padding-top: 22px;
    border-top: 1px solid var(--ui-bg-300);
}

.team__staff .team__label {
    margin-bottom: 14px;
}

.content .team {
    margin: 40px 0;
}

/* Перебиваем .content h3, иначе заголовок получает 1.5rem */
.content .team__title {
    margin: 0;
    font-size: clamp(1.5rem, 2.5vw, 1.75rem);
}

@media (max-width: 640px) {
    .team__inner {
        padding: 28px 20px 24px;
    }

    .team__header {
        align-items: flex-start;
        gap: 16px;
    }

    .team__meta {
        text-align: left;
    }

    .team__list {
        grid-template-columns: 1fr;
        row-gap: 12px;
    }
}

/* when tips live inside .content */
.content .article-tips {
    margin: 40px 0;
}

.content .article-tips__text {
    text-align: left;
}

/* Article thesis (typewriter block)
------- ------- ------- */
.article-thesis {
    --article-thesis-height: 265px;
    --stamp-radius: 7px;
    --stamp-gap: 22px;
    width: 100%;
    max-width: 100%;
    margin: 40px 0;
    font-family: var(--wf);
    filter: var(--sp-drop-shadow-s);
}

.article-thesis__card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: var(--article-thesis-height);
    background: var(--ui-bg-100);
    border-radius: 12px;
    padding: 32px 36px 24px;
    overflow: hidden;
    /* левый край в виде перфорации почтовой марки: полукруги вырезаны маской */
    -webkit-mask: radial-gradient(circle var(--stamp-radius) at left,
            transparent calc(var(--stamp-radius) - 0.5px), #000 var(--stamp-radius)) left center / 100% var(--stamp-gap) repeat-y;
    mask: radial-gradient(circle var(--stamp-radius) at left,
            transparent calc(var(--stamp-radius) - 0.5px), #000 var(--stamp-radius)) left center / 100% var(--stamp-gap) repeat-y;
}

.article-thesis__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.article-thesis__label {
    font-family: var(--wf2);
    font-size: 1.125rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-primary);
}

.article-thesis__counter {
    font-family: var(--wf2);
    font-size: 1rem;
    letter-spacing: 0.06em;
    color: var(--color-text-light-grey);
}

.article-thesis__textwrap {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.article-thesis__text,
.content .article-thesis__text {
    margin: 0;
    font-size: var(--size-heading-xs);
    line-height: 1.2;
    color: var(--color-text);
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.32s ease, transform 0.32s ease;
    text-align: left
}

.article-thesis__text.is-exiting {
    opacity: 0;
    transform: translateY(-10px);
}

.article-thesis__cursor {
    color: var(--color-primary);
    animation: thesis-blink 1s step-start infinite;
}

.article-thesis__cursor.is-hidden {
    display: none;
}

@keyframes thesis-blink {

    0%,
    45% {
        opacity: 1;
    }

    50%,
    95% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.article-thesis__nav {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 28px;
}

.article-thesis__arrow {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--ui-bg-300);
    border-radius: 50%;
    background: var(--ui-bg-100);
    color: var(--color-primary);
    font-size: 1rem;
    cursor: pointer;
    transition: var(--trans);
}

.article-thesis__arrow:hover {
    background: var(--ui-bg-200);
    border-color: var(--color-text-light-grey);
}

.article-thesis__track {
    position: relative;
    flex: 1 1 auto;
    height: 2px;
    background: var(--ui-bg-300);
    border-radius: 2px;
}

.article-thesis__progress {
    position: absolute;
    left: 0;
    top: 0;
    height: 2px;
    background: var(--color-primary);
    border-radius: 2px;
    transition: width 0.3s ease;
}

.article-thesis__dot {
    position: absolute;
    top: 50%;
    width: 9px;
    height: 9px;
    padding: 0;
    border: 2px solid var(--ui-bg-300);
    border-radius: 50%;
    background: var(--ui-bg-100);
    cursor: pointer;
    transform: translate(-50%, -50%);
    transition: var(--trans);
}

.article-thesis__dot.is-passed {
    border-color: var(--color-primary);
}

.article-thesis__dot.is-active {
    width: 12px;
    height: 12px;
    background: var(--color-primary);
    border-color: var(--color-primary);
}

@media (prefers-reduced-motion: reduce) {
    .article-thesis__text {
        transition: opacity 0.2s linear !important;
        transform: none !important;
    }
}

@media (max-width: 640px) {
    .article-thesis__card {
        height: auto;
        padding: 24px 22px 20px;
    }

    .article-thesis__text {
        font-size: 1rem;
        line-height: 1.35;
    }
}

/* Article / WYSIWYG content
------- ------- ------- */
.article {
    max-width: var(--wid);
    margin: 0 auto;
    padding: 0 var(--gap) 64px;
}

.next-artice-box {
    margin: 0 auto;
    max-width: var(--content-width);
}

.content {
    margin: 0 auto;
    font-family: var(--wf);
    font-size: var(--size-text);
    line-height: var(--content-line-height);
    color: var(--color-text);
    padding-bottom: 48px;
}

.content--wid {
    max-width: var(--content-width);
}

.content>*:first-child {
    margin-top: 0;
}

.content>*:last-child {
    margin-bottom: 0;
}

.content h1 {
    font-family: var(--wf2);
    font-size: clamp(2rem, 4.5vw, 3.25rem);
    line-height: 1.08;
    color: var(--color-primary);
    margin: 32px 0 40px;
    letter-spacing: 0.01em;
    font-weight: normal;
}

.content h2 {
    font-family: var(--wf2);
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    line-height: 1.12;
    color: var(--color-primary);
    margin: 48px 0 28px;
    padding-top: 48px;
    /* border-top: 1px solid rgba(49, 31, 27, 0.14); */
    letter-spacing: 0.02em;
    font-weight: normal;
}

.content h1+h2 {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.content h3 {
    font-family: var(--wf2);
    font-size: 1.5rem;
    line-height: 1.2;
    color: var(--color-primary);
    margin: 32px 0 16px;
    font-weight: normal;
}

.content p {
    margin: 0 0 1.25em;
    text-align: justify;
    line-height: var(--content-line-height);
}

.content h2+p::first-letter {
    float: left;
    font-family: var(--wf2);
    font-size: 3.4em;
    line-height: 0.82;
    padding: 0.04em 0.1em 0 0;
    color: var(--color-primary);
}

.content a {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.content strong,
.content b {
    font-weight: 600;
    color: var(--color-primary);
}

.content em,
.content i {
    font-style: italic;
}

.content blockquote {
    margin: 36px 0;
    padding: 28px 32px;
    border-left: 3px solid var(--color-primary);
    background: rgba(255, 255, 255, 0.55);
    border-radius: 0 16px 16px 0;
}

.content blockquote p {
    font-size: var(--size-text);
    line-height: 1.2;
    font-style: italic;
    margin: 0 0 1em;
    color: var(--color-primary);
}

.content blockquote p:last-child {
    margin-bottom: 0;
}

.content blockquote cite {
    display: block;
    font-style: normal;
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--color-primary);
}

.content blockquote p:has(cite) {
    margin-top: 20px;
    font-size: 0.875rem;
    font-style: normal;
    line-height: 1.2;
    color: var(--color-text-grey);
}

/* Fact callout ("Интересный факт") */
.content .fact {
    margin: 36px 0;
    padding: 28px 32px;
    background: #FBF4DC;
    border: 1px solid #DCC57E;
    border-radius: 16px;
}

/* Visual label, intentionally not a real heading (h1-h6):
   the callout is not a document section */
.content .fact__title {
    font-family: var(--wf2);
    font-size: 1.25rem;
    line-height: 1.2;
    text-transform: uppercase;
    color: #8A6D1F;
    margin-bottom: 12px;
}

.content .fact p {
    margin: 0 0 1em;
}

.content .fact p:last-child {
    margin-bottom: 0;
}

.content ul,
.content ol {
    margin: 0 0 1.5em;
    padding: 0;
    list-style: none;
}

.content ul li,
.content ol li {
    position: relative;
    padding-left: 1.4em;
    margin-bottom: 1.1em;
    color: var(--color-text);
}

.content ul li::before {
    content: "—";
    position: absolute;
    left: 0;
    color: var(--color-primary);
    font-weight: 600;
}

.content ol {
    counter-reset: content-ol;
}

.content ol li {
    counter-increment: content-ol;
}

.content ol li::before {
    content: counter(content-ol) ".";
    position: absolute;
    left: 0;
    color: var(--color-primary);
    font-weight: 600;
}

.content ul li:last-child,
.content ol li:last-child {
    margin-bottom: 0;
}

.content img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 32px auto;
    border-radius: 12px;
}

.content hr {
    border: none;
    border-top: 1px solid rgba(49, 31, 27, 0.14);
    margin: 48px 0;
}

.article-img {
    margin: 24px auto;
    width: fit-content;
}

.article-img img {
    max-height: 740px;
    width: auto;
    margin: 0 auto;
}

.article-img__title {
    font-size: var(--size-text-s);
    line-height: 1.35;
    color: var(--color-text-grey);
    margin-top: var(--gf);
    font-style: italic;
}

/* Filter section */
.filter-section {
    max-width: var(--wid);
    margin: 24px 0;
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}


.filter-line {
    display: flex;
    gap: clamp(12px, 2.6vw, 24px);
    row-gap: 6px;
    align-items: start;
    flex-wrap: wrap;
}

.filter-item,
a.filter-item {
    /* 18px at 375px viewport -> 32px at ~920px and up */
    font-size: clamp(18px, 2.6vw + 8px, 32px);
    text-transform: uppercase;
    line-height: 1;
    color: rgba(0, 0, 0, 0.4);
    font-family: var(--wf2);
    transition: var(--trans);
}

.filter-item:hover,
a.filter-item:hover {
    color: rgba(0, 0, 0, 1);
}

.filter-item--active,
a.filter-item--active {
    color: rgba(0, 0, 0, 1);
}

.filter-reset {
    display: flex;
    width: fit-content;
    font-family: var(--wf2);
    align-items: center;
    gap: 4px;
    font-size: clamp(18px, 2.6vw + 8px, 32px);
    color: rgba(0, 0, 0, 0.4);
    text-decoration: none;
    border-bottom: 1px dotted currentColor;
    transition: color .15s ease, opacity .15s ease;
    opacity: 1;

}

.filter-reset:hover {
    color: rgba(0, 0, 0, 1);
}

.filter-reset[hidden] {
    visibility: hidden;
    opacity: 0;
}

/* Project compact progress
------- ------- ------- */
.project-compact-progress {
    display: flex;
    align-items: stretch;
    gap: 0;
    margin: 32px 0 24px;
    padding: 20px 24px;
    background: var(--color-white);
    border-radius: 16px;
    border: 1px solid var(--ui-bg-300);
}

.project-compact-progress__left {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 110px;
    padding-right: 24px;
    border-right: 1px solid var(--ui-bg-300);
}

.project-compact-progress__count {
    font-family: var(--wf2);
    font-size: clamp(36px, 5vw, 48px);
    line-height: 1;
    text-transform: uppercase;
    color: var(--color-primary);
}

.project-compact-progress__num {
    color: var(--color-accent);
}

.project-compact-progress__total {
    color: var(--color-primary);
}

.project-compact-progress__label {
    margin-top: 6px;
    font-family: var(--wf2);
    font-size: 16px;
    line-height: 1;
    text-transform: uppercase;
    color: var(--color-text-grey);
}

.project-compact-progress__right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
    flex: 1 1 auto;
    min-width: 0;
    padding-left: 24px;
}

.project-compact-progress__status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--size-text-s);
    line-height: 1.35;
    color: var(--color-text-grey);
}

.project-compact-progress__status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-accent);
    flex-shrink: 0;
    animation: project-progress-dot-pulse 2.4s ease-in-out infinite;
}

.project-compact-progress__dots {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-content: flex-start;
}

.project-compact-progress__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ui-bg-300);
    flex-shrink: 0;
}

.project-compact-progress__dot.is-done {
    width: 8px;
    height: 8px;
    background: var(--color-accent);
}

/* Project progress
------- ------- ------- */
.project-progress {
    position: relative;
    margin: 48px 0 24px;
    padding: 32px;
    background: var(--color-white);
    border-radius: 16px;
    overflow: hidden;
}

.project-progress::before {
    content: '';
    position: absolute;
    top: -40%;
    right: -10%;
    width: 55%;
    height: 90%;
    background: radial-gradient(ellipse at center, rgba(247, 104, 91, 0.18) 0%, transparent 70%);
    pointer-events: none;
}

.project-progress__badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 28px;
    padding: 0 12px;
    border-radius: 16px;
    background: var(--color-primary);
    background-image: linear-gradient(120deg,
            var(--color-primary) 0%,
            #4a322c 35%,
            #5c3d2e 50%,
            #4a322c 65%,
            var(--color-primary) 100%);
    background-size: 220% 100%;
    color: var(--color-white);
    font-family: var(--wf2);
    font-size: 14px;
    line-height: 1;
    text-transform: uppercase;
    animation: project-progress-badge-shift 6s ease-in-out infinite;
}

.project-progress__badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-accent);
    flex-shrink: 0;
    animation: project-progress-dot-pulse 2.4s ease-in-out infinite;
}

@keyframes project-progress-dot-pulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(247, 104, 91, 0.45);
    }

    50% {
        opacity: 0.35;
        transform: scale(0.85);
        box-shadow: 0 0 0 4px rgba(247, 104, 91, 0);
    }
}

@keyframes project-progress-badge-shift {

    0%,
    100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

.project-progress__title {
    position: relative;
    margin: 20px 0 0;
    font-family: var(--wf2);
    font-size: clamp(28px, 4vw, 40px);
    line-height: 1.1;
    text-transform: uppercase;
    color: var(--color-primary);
    font-weight: normal;
}

.project-progress__num {
    color: var(--color-accent);
}

.project-progress__desc {
    position: relative;
    margin: 12px 0 0;
    max-width: 52ch;
    font-size: var(--size-text-s);
    line-height: 1.5;
    color: var(--color-text-grey);
}

.project-progress__bar {
    position: relative;
    display: flex;
    gap: 3px;
    margin: 28px 0 0;
    height: 28px;
}

.project-progress__seg {
    flex: 1 1 0;
    min-width: 2px;
    height: 100%;
    border-radius: 999px;
    background: var(--ui-bg-200);
}

.project-progress__seg.is-done {
    background: var(--color-accent);
}

.project-progress__stats {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 20px 0 0;
}

.project-progress__stat {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 12px;
    border-radius: 16px;
    font-family: var(--wf2);
    font-size: 16px;
    line-height: 1;
    text-transform: uppercase;
}

.project-progress__stat--done {
    background: var(--color-accent);
    color: var(--color-white);
}

.project-progress__stat--rest {
    background: var(--ui-bg-100);
    color: var(--color-text-grey);
    box-shadow: inset 0 0 0 1px var(--ui-bg-300);
}


/* About page
------- ------- ------- */
.about {
    --about-ink: #1a1f2c;
    --about-muted: #4a5262;
    --about-intro: #363636;
    --about-rule: #705e56;
    --about-panel: #f7f8fa;
    --about-card-border: #e5e7eb;
    --about-photo-from: #cadee2;
    --about-photo-to: #dce8e9;
    max-width: var(--wid);
    margin: 0 auto;
    padding: 0 0 64px;
}

.about-video {
    max-width: var(--content-width);
    margin: 0 auto 40px;
    border-radius: 9px;
    overflow: hidden;
    background: #000;
}

.about-video .video-facade::after {
    background: linear-gradient(180deg, rgba(0, 0, 0, .08) 0%, rgba(0, 0, 0, .42) 100%);
}

.about-video__brand {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    width: min(43%, 321px);
    height: auto;
    transform: translate(-50%, -58%);
    pointer-events: none;
    object-fit: contain;
}

.about-video .video-facade__play {
    z-index: 3;
    width: 56px;
    height: 56px;
    background: rgba(0, 0, 0, .45);
}

.about-video .video-facade__play::before {
    border-width: 10px 0 10px 16px;
}

.about-intro {
    display: grid;
    grid-template-columns: minmax(160px, 208px) minmax(0, 500px);
    gap: 36px;
    align-items: center;
    max-width: var(--content-width);
    margin: 0 auto 56px;
    padding: 0 var(--gap);
}

.about-logo {
    margin: 0;
    width: auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.about-logo__img {
    display: block;
    width: 100%;
    max-width: 208px;
    height: auto;
}

.about-intro__text {
    margin: 0;
    font-family: var(--wf);
    font-size: 16px;
    line-height: 1.65;
    color: var(--about-intro);
    text-align: justify;
}

.about-rule {
    display: flex;
    align-items: stretch;
    width: 100%;
    height: 2px;
    margin: 0 0 32px;
}

.about-rule::before {
    content: '';
    flex: 1 1 auto;
    height: 2px;
    background: var(--about-rule);
    opacity: 0.2;
}

.about-rule::after {
    content: '';
    flex: 0 0 20px;
    height: 2px;
    background: var(--about-rule);
}

.about-rule--center {
    width: 80px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 24px;
}

.about-rule--center::before {
    display: none;
}

.about-rule--center::after {
    flex: 1 1 auto;
    width: 100%;
}

.about-split {
    display: grid;
    grid-template-columns: minmax(0, 346px) minmax(0, 362px);
    gap: 36px;
    align-items: start;
    max-width: var(--content-width);
    margin: 0 auto 56px;
    padding: 0 var(--gap);
}

.about-split--wide {
    grid-template-columns: minmax(0, 419px) minmax(0, 413px);
    gap: 25px;
    align-items: center;
    max-width: 992px;
    margin: 0 auto;
    padding: 64px var(--gap);
}

.about-split__text p {
    margin: 0;
    font-family: var(--wf);
    font-size: 16px;
    line-height: 1.7;
    color: var(--about-muted);
    text-align: justify;
}

.about-split--wide .about-split__text p {
    line-height: 1.75;
    text-align: left;
}

.about-split__media {
    margin: 0;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.05);
    background: var(--about-panel);
}

.about-split__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 362 / 335;
}

.about-split--wide .about-split__media img {
    aspect-ratio: 419 / 404;
}

.about-statement {
    background: var(--about-panel);
    padding: 80px var(--gap);
    margin: 0 0 0;
    width: 100%;
}

.about-statement__inner {
    max-width: 733px;
    margin: 0 auto;
    text-align: center;
}

.about-statement__text {
    margin: 0;
    font-family: var(--wf2);
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    line-height: 1.6;
    color: var(--about-ink);
    font-weight: normal;
}

.about-hosts {
    padding: 80px var(--gap) 40px;
}

.about-hosts__intro {
    max-width: 733px;
    margin: 0 auto 48px;
    text-align: center;
}

.about-hosts__title {
    margin: 0;
    font-family: var(--wf2);
    font-size: clamp(1.75rem, 3.2vw, 2.5rem);
    line-height: 1.2;
    color: var(--about-ink);
    font-weight: normal;
}

.about-hosts__stack {
    display: flex;
    flex-direction: column;
    gap: 32px;
    max-width: 992px;
    margin: 0 auto;
}

.about-host-row {
    display: grid;
    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
    gap: 32px;
    align-items: start;
    padding: 24px;
    border: 1px solid var(--about-card-border);
    border-radius: 12px;
    background: var(--color-white);
    overflow: hidden;
}

.about-host-row--reverse {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
}

.about-host-row--reverse .about-host-row__body {
    order: 1;
    padding: 8px 0 8px 8px;
}

.about-host-row--reverse .about-host-row__media {
    order: 2;
}

.about-host-row__media {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

.about-host-row__video {
    display: block;
    width: 100%;
    max-width: 280px;
    aspect-ratio: 9 / 16;
    max-height: 498px;
    border: 0;
    border-radius: 16px;
    background: #000;
    object-fit: contain;
    box-shadow: var(--sp-shadow-m);
}

.about-host-row__video:fullscreen,
.about-host-row__video:-webkit-full-screen {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    aspect-ratio: auto;
    object-fit: contain;
    border-radius: 0;
    box-shadow: none;
}

.about-host-row__body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 8px 8px 8px 0;
    min-width: 0;
}

.about-host-row__name {
    margin: 0;
    font-family: var(--wf2);
    font-size: 32px;
    line-height: 1;
    color: var(--about-ink);
    text-transform: uppercase;
    font-weight: normal;
}

.about-host-row__line {
    width: 100%;
    height: 1px;
    background: rgba(26, 31, 44, 0.12);
}

.about-host-row__text {
    margin: 0;
    font-family: var(--wf);
    font-size: 16px;
    line-height: 1.6;
    color: var(--about-muted);
}

/* =========================== MEDIA ====================================== */
@media screen and (max-width: 900px) {
    .about-intro {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        gap: 24px;
    }

    .about-intro__text {
        text-align: left;
    }

    .about-logo {
        justify-content: center;
    }

    .about-split,
    .about-split--wide {
        grid-template-columns: 1fr;
        max-width: var(--content-width);
        gap: 28px;
        padding-left: var(--gap);
        padding-right: var(--gap);
    }

    .about-host-row,
    .about-host-row--reverse {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 20px;
    }

    .about-host-row--reverse .about-host-row__media {
        order: -1;
    }

    .about-host-row--reverse .about-host-row__body {
        order: 0;
        padding: 0;
    }
}

@media screen and (max-width: 768px) {
    .about-logo {
        margin: 0;
    }

    .about-video {
        margin-bottom: 28px;
        border-radius: 8px;
    }

    .about-video__brand {
        width: min(56%, 240px);
    }

    .about-intro {
        margin-bottom: 40px;
    }

    .about-statement {
        padding: 48px var(--gap);
    }

    .about-split--wide {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .about-hosts {
        padding: 48px var(--gap) 24px;
    }

    .about-host-row__video {
        max-width: 220px;
        max-height: 392px;
    }

    .about-host-row__body {
        padding: 0;
    }

    .about-host-row__name {
        font-size: 28px;
    }

    .page {
        padding: 0 var(--gap);
    }

    .logo-combination {
        width: fit-content;
        max-width: calc(100% - 40%);
        margin: 0 auto;
    }

    .hero-section {
        grid-template-columns: 1fr;
    }

    .hero-section__desc {
        margin: 32px auto;
    }

    .hero-section__right {
        order: -1;
        /* видео сверху */
    }

    .article {
        padding-bottom: 48px;
    }

    .content h1 {
        margin: 24px 0 32px;
    }

    .content h2 {
        margin-top: 40px;
        padding-top: 40px;
    }

    .content blockquote {
        margin: 28px 0;
        padding: 20px 24px;
    }

    .content .fact {
        margin: 28px 0;
        padding: 20px 24px;
    }

    .content h2+p::first-letter {
        font-size: 2.8em;
    }

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

    .articles-grid>*:nth-child(n) {
        grid-column: 1 / -1;
    }

    /* На сжатом экране снимаем лимит высоты line-grid — карточка растёт по контенту */
    .articles-line-grid .article-card:not(.article-card--soon) {
        height: auto;
        max-height: none;
    }

    .article-card__title {
        font-size: 24px;
    }

    .project-progress {
        padding: 24px 20px;
        margin-top: 32px;
    }

    .project-progress__bar {
        height: 20px;
        gap: 2px;
    }

    .project-compact-progress {
        flex-direction: column;
        padding: 20px;
        gap: 16px;
    }

    .project-compact-progress__left {
        align-items: flex-start;
        min-width: 0;
        padding-right: 0;
        padding-bottom: 16px;
        border-right: none;
        border-bottom: 1px solid var(--ui-bg-300);
    }

    .project-compact-progress__right {
        padding-left: 0;
    }

    .article-tips {
        --tips-back-rotate: 0.8deg;
    }

    .article-tips__stack {
        --tips-peek: 6px;
        padding-right: 12px;
    }

    .article-tips__slide {
        padding: 22px 20px;
    }

    .article-tips__nav {
        gap: 12px;
    }

    .article-tips__arrow {
        width: 32px;
        height: 32px;
        border-radius: 8px;
    }
}

/* ==========================================================================
   Video facade — обложка вместо плеера ВК до клика
   ========================================================================== */

.video-facade {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: inherit;
    background: #000;
    cursor: pointer;
    overflow: hidden;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
}

/* .video-responsive имеет height: 0 — высота задана только padding'ом,
   поэтому обложку позиционируем абсолютно, как iframe и .article-card__media img */
.video-facade__img {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    transition: transform .35s ease, opacity .35s ease;
}

/* лёгкое затемнение — контраст под кнопкой play */
.video-facade::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, .05) 0%, rgba(0, 0, 0, .35) 100%);
    pointer-events: none;
}

.video-facade__play {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    width: 76px;
    height: 76px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: rgba(0, 0, 0, .55);
    transition: background-color .25s ease, transform .25s ease;
    pointer-events: none;
}

.video-facade__play::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-40%, -50%);
    border-style: solid;
    border-width: 12px 0 12px 20px;
    border-color: transparent transparent transparent #fff;
}

.video-facade:hover .video-facade__img,
.video-facade:focus-visible .video-facade__img {
    transform: scale(1.04);
    opacity: .85;
}

.video-facade:hover .video-facade__play,
.video-facade:focus-visible .video-facade__play {
    background: rgba(0, 0, 0, .82);
    transform: translate(-50%, -50%) scale(1.08);
}

.video-facade:focus-visible {
    outline: 3px solid #fff;
    outline-offset: -3px;
}

/* фон-заглушка на время загрузки плеера после клика */
.video-responsive.is-loading {
    background: #000;
}

.video-facade__spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    width: 44px;
    height: 44px;
    margin: -22px 0 0 -22px;
    border: 3px solid rgba(255, 255, 255, .25);
    border-top-color: #fff;
    border-radius: 50%;
    animation: video-facade-spin .8s linear infinite;
    pointer-events: none;
}

@keyframes video-facade-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 768px) {
    .video-facade__play {
        width: 58px;
        height: 58px;
    }

    .video-facade__play::before {
        border-width: 9px 0 9px 15px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .video-facade__img,
    .video-facade__play {
        transition: none;
    }

    .video-facade:hover .video-facade__img {
        transform: none;
    }

    .video-facade__spinner {
        animation-duration: 2.4s;
    }
}

/* ========================================================================== */

.video-page__desc {
    margin-bottom: 16px;
}

.video-page-more {

}