/* Self-hosted OFL fonts; only the required alphabets are downloaded. */
@font-face {
  font-family: 'Bad Script';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/BadScript-custom-cyrillic.3c2affd54df6.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Bad Script';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/BadScript-custom-latin.0bdbcb844bf8.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../fonts/Montserrat-custom-cyrillic.5bfbf48383da.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../fonts/Montserrat-custom-latin.f854280d2014.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
.cp-mobile-hero__wordmark { display: none; }

@media (max-width: 991.98px) {
  html:has(.cp-page), body:has(.cp-page) { min-width: 0; }
  html, body, #main-content { background: #030303 !important; }
  body main#main-content.container-xxl {
    padding: var(--mobile-shell-header-height, 64px) 0 24px !important;
  }
  .cp-breadcrumbs, .cp-hero, .mobile-site-shell .bottom-nav { display: none !important; }
  .cp-shell { gap: 0; }
  .cp-page:not(.is-studio-active) .cp-configurator { display: none; }
  .cp-context-banner, .cp-draft-resume { margin: 12px; }
  .cp-support-stack { margin: 28px 16px 0; }
  body.cp-studio-active .cp-mobile-hero { display: none; }
}

/* The same garment preview and visual language across every screen. */
  .cp-mobile-hero {
    --hero-gold: #efbb54;
    display: block;
    position: relative;
    isolation: isolate;
    container-type: inline-size;
    width: 100%;
    max-width: 560px;
    margin-inline: auto;
    overflow: hidden;
    padding: 15px 0 48px;
    color: #efefef;
    background:
      radial-gradient(ellipse at 16% 1%, #70501918, transparent 28%),
      radial-gradient(ellipse at 89% 18%, #65461314, transparent 32%), #030303;
    text-align: center;
  }
  .cp-mobile-hero__intro { position: relative; z-index: 2; padding: 0 20px; }
  .cp-mobile-hero__eyebrow {
    margin: 0 0 8px;
    color: #e9b648;
    font-size: clamp(9px, 2.37cqw, 15px);
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: .34em;
    text-transform: uppercase;
  }
  .cp-mobile-hero__title {
    margin: 0;
    font-family: Montserrat, Inter, sans-serif;
    font-size: clamp(40px, 13.73cqw, 89px);
    font-weight: 900;
    line-height: 1.04;
    letter-spacing: -.035em;
    text-transform: uppercase;
  }
  .cp-mobile-hero__title span {
    display: block;
    width: fit-content;
    margin-inline: auto;
    color: #f5f5f5;
    background: linear-gradient(180deg, #fff 18%, #f9f9f9 45%, #a5a5a5 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .cp-mobile-hero__title span:first-child { font-size: 1.05em; }
  .cp-mobile-hero__title span + span {
    margin-top: 0;
    color: #efbd55;
    background-image: linear-gradient(175deg, #fff5cf 0%, #ffe19a 24%, #e9b651 52%, #ce8e2b 85%, #f6d06c 100%);
    filter: drop-shadow(0 2px 12px #eeb7411a);
  }
  .cp-mobile-hero__description {
    max-width: 34em;
    margin: 9px auto 0;
    color: #c4c3c3;
    font-size: clamp(12px, 3.28cqw, 19px);
    font-weight: 400;
    line-height: 1.24;
    text-wrap: pretty;
  }
  .cp-mobile-hero__choices {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: .92fr 1.05fr 1fr 1.04fr;
    gap: 6px;
    margin: 12px 20px 0;
  }
  .cp-mobile-hero__choice {
    display: flex;
    min-width: 0;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 6px 5px;
    border: 1px solid #30302d;
    border-radius: 999px;
    background: #060606b3;
    color: #bbb;
    font: inherit;
    font-size: clamp(9px, 2.44cqw, 15px);
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .2s, color .2s, box-shadow .2s;
  }
  .cp-mobile-hero__choice svg {
    flex: 0 0 auto;
    width: clamp(16px, 4.47cqw, 27px);
    height: clamp(16px, 4.47cqw, 27px);
    fill: none;
    stroke: #92918f;
    stroke-width: 1.45;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .cp-mobile-hero__choice[aria-pressed="true"] {
    border-color: #ffd269;
    background: linear-gradient(110deg, #51340750, #15100688);
    color: #fff;
    box-shadow: inset 0 0 0 .4px #f5bc44, 0 0 17px #c886192b;
  }
  .cp-mobile-hero__choice[aria-pressed="true"] svg { stroke: #f5c456; }
  .cp-mobile-hero__choice[aria-busy="true"] { border-color: #b09050; }
  .cp-mobile-hero :is(button, a):focus-visible { outline: 2px solid #ffe09a; outline-offset: 4px; }

  .cp-mobile-hero__scene { position: relative; z-index: 1; height: 104cqw; margin-top: 8px; }
  .cp-mobile-hero__scene::after {
    content: "";
    position: absolute;
    z-index: 2;
    right: 8%;
    bottom: -3%;
    left: 8%;
    height: 24%;
    background: radial-gradient(ellipse at 27% 65%, #cfa15b55, transparent 49%), radial-gradient(ellipse at 72% 54%, #efd6a044, transparent 46%);
    filter: blur(9px);
    opacity: .2;
    pointer-events: none;
    animation: cp-hero-mist 9s ease-in-out infinite alternate;
  }
  .cp-mobile-hero__art { position: absolute; inset: 0 0 -160px; pointer-events: none; }
  .cp-mobile-hero__art picture {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .35s ease;
    /* Keep original pixels; crop the empty headroom and fade the stage floor. */
    mask-image: linear-gradient(#0000, #000 8%, #000 62%, #0000 100%);
    -webkit-mask-image: linear-gradient(#0000, #000 8%, #000 62%, #0000 100%);
  }
  .cp-mobile-hero__art picture.is-active { opacity: 1; }
  .cp-mobile-hero__art img {
    position: absolute;
    top: -14.56cqw;
    left: 5%;
    display: block;
    width: 90%;
    max-width: none;
    height: auto;
    content-visibility: visible;
    mask-image: linear-gradient(90deg, transparent, #000 8% 92%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8% 92%, transparent);
  }
  .cp-mobile-hero__art::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #03030399, transparent 15% 85%, #03030399);
  }
  .cp-mobile-hero__annotations {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding: 0 5% 0 8%;
  }
  .cp-mobile-hero__handwriting {
    position: relative;
    flex: 0 0 auto;
    width: max-content;
    color: #f2d285;
    font-family: "Bad Script", cursive;
    font-size: clamp(16px, 5.1cqw, 33px);
    font-weight: 400;
    line-height: 1.65;
    text-align: left;
    transform: rotate(-7deg);
    transform-origin: center;
    text-shadow: 0 1px 10px #000, 0 0 8px #dca84926;
    animation: cp-hero-ink-breathe 4.8s ease-in-out infinite;
  }
  .cp-mobile-hero__handwriting span { display: block; white-space: nowrap; }
  .cp-mobile-hero__handwriting span + span { padding-left: 20%; }
  .cp-mobile-hero__handwriting svg { position: absolute; left: 58%; bottom: 0; width: 53%; height: auto; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
  .cp-mobile-hero__identity {
    flex: 0 1 45%;
    min-width: 0;
    margin: 5px 0 0;
    color: #bcb8b1;
    font-size: clamp(6px, 1.77cqw, 10px);
    line-height: 1.6;
    letter-spacing: .15em;
    text-align: right;
    text-transform: uppercase;
    text-shadow: 0 1px 6px #000;
  }
  .cp-mobile-hero__identity span { display: block; }
  .cp-mobile-hero__identity::after { content: ""; display: block; width: 26px; height: 1px; margin: 6px 0 0 auto; background: #cca33f; }

  .cp-mobile-hero__actions { position: relative; z-index: 3; display: grid; justify-items: center; gap: 14px; margin: 0 9%; }
  .cp-mobile-hero__start {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(10px, 3.33cqw, 22px);
    width: 100%;
    min-height: 49px;
    padding: 14px 12px;
    overflow: hidden;
    border: 1px solid #ffe6a3;
    border-radius: 19px;
    background: linear-gradient(115deg, #ffe49b 0%, #f9d37b 26%, #e9ad47 68%, #c88d38 100%);
    color: #130d04;
    box-shadow: inset 0 1px 2px #fff7dca6, inset 0 -1px 3px #ffe8a34d, 0 0 28px #b8771a30, 0 8px 18px #0006;
    font: inherit;
    font-size: clamp(14px, 3.85cqw, 24px);
    font-weight: 700;
    line-height: 1.15;
    cursor: pointer;
    transition: filter .2s, transform .2s;
  }
  .cp-mobile-hero__start::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, #fff8 50%, transparent 65%); transform: translateX(-150%); animation: cp-hero-gold-sheen 8s ease-in-out 2s infinite; pointer-events: none; }
  .cp-mobile-hero__start:active { transform: scale(.985); filter: brightness(.95); }
  .cp-mobile-hero__start svg { width: 23px; height: 23px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .cp-mobile-hero__telegram {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    max-width: 100%;
    min-height: 44px;
    padding: 8px 14px 8px 9px;
    border: 1px solid #609fc24d;
    border-radius: 999px;
    background: linear-gradient(115deg, #13232b, #0b1115);
    color: #d9eff9;
    font-family: inherit;
    font-size: clamp(11px, 2.7cqw, 14px);
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: border-color .2s, background .2s;
  }
  .cp-mobile-hero__telegram:hover { color: #fff; border-color: #62b6e2; background: #153040; }
  .cp-mobile-hero__telegram-icon { display: grid; place-items: center; width: 25px; height: 25px; flex: 0 0 auto; border-radius: 50%; background: linear-gradient(150deg, #26baff, #008fce); }
  .cp-mobile-hero__telegram-icon svg { width: 19px; height: 19px; fill: #fff; }
  .cp-mobile-hero__chevron { width: 7px; height: 12px; flex: 0 0 auto; margin-left: 4px; fill: none; stroke: currentColor; stroke-width: 1.5; }
  .cp-mobile-hero__benefits {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr .82fr 1.14fr 1.12fr;
    gap: 0;
    margin: 29px 14px 0;
    padding: 0;
    list-style: none;
    text-align: left;
  }
  .cp-mobile-hero__benefits li { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 6px 8px; color: #d3d3d3; font-size: clamp(8px, 2.08cqw, 13px); line-height: 1.4; }
  .cp-mobile-hero__benefits li:first-child { padding-left: 0; }
  .cp-mobile-hero__benefits li:last-child { padding-right: 0; }
  .cp-mobile-hero__benefits li + li { border-left: 1px solid #ffffff2b; }
  .cp-mobile-hero__benefits svg { width: clamp(21px, 5.72cqw, 35px); height: clamp(21px, 5.72cqw, 35px); flex: 0 0 auto; fill: none; stroke: #f3c15c; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 5px #eca92635); }

@media (min-width: 992px) {
  .cp-mobile-hero {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    grid-template-rows: auto auto 1fr auto;
    column-gap: 12px;
    row-gap: 26px;
    align-items: start;
    width: 100%;
    max-width: none;
    min-height: 680px;
    padding: 58px 48px 26px;
    border: 1px solid #d5af5c26;
    border-radius: 28px;
    background:
      radial-gradient(ellipse at 75% 48%, #a8752017, transparent 48%),
      radial-gradient(ellipse at 8% 3%, #a8752010, transparent 44%), #030303;
    text-align: left;
  }
  .cp-mobile-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 1px 0 #ffe4aa0d;
    pointer-events: none;
  }
  .cp-mobile-hero__intro { grid-area: 1 / 1; padding: 0; }
  .cp-mobile-hero__wordmark {
    display: block;
    margin: 0 0 32px;
    color: #f4f1e9;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .025em;
  }
  .cp-mobile-hero__wordmark span {
    margin-left: 9px;
    padding-left: 12px;
    border-left: 1px solid #ad8b4b66;
    color: #c4ac7d;
    font-weight: 400;
  }
  .cp-mobile-hero__eyebrow { margin-bottom: 14px; font-size: 10px; letter-spacing: .27em; }
  .cp-mobile-hero__title { font-size: clamp(52px, 5.1vw, 78px); line-height: 1.04; letter-spacing: -.045em; }
  .cp-mobile-hero__title span { margin-inline: 0; }
  .cp-mobile-hero__description {
    max-width: 420px;
    margin: 24px 0 0;
    color: #bcbab5;
    font-size: 15px;
    line-height: 1.65;
  }
  .cp-mobile-hero__description br { display: none; }
  .cp-mobile-hero__choices { grid-area: 2 / 1; width: 100%; max-width: 440px; margin: 0; gap: 7px; }
  .cp-mobile-hero__choice { min-height: 43px; padding: 9px 6px; gap: 6px; font-size: 11px; }
  .cp-mobile-hero__choice svg { width: 21px; height: 21px; }
  .cp-mobile-hero__choice:hover { color: #fff1ce; border-color: #b58d47; }
  .cp-mobile-hero__scene {
    grid-area: 1 / 2 / 4 / 3;
    align-self: stretch;
    min-height: 535px;
    height: auto;
    margin: -32px -36px -10px -14px;
  }
  .cp-mobile-hero__art { inset: 0; overflow: hidden; }
  .cp-mobile-hero__art picture {
    mask-image: linear-gradient(transparent, #000 10% 74%, transparent 100%);
    -webkit-mask-image: linear-gradient(transparent, #000 10% 74%, transparent 100%);
  }
  .cp-mobile-hero__art img { top: -22%; left: 0; width: 100%; }
  .cp-mobile-hero__art::after { background: linear-gradient(90deg, #030303, transparent 12% 90%, #030303); }
  .cp-mobile-hero__scene::after { bottom: 0; }
  .cp-mobile-hero__annotations { padding: 46px 20px 0 10px; gap: 20px; }
  .cp-mobile-hero__handwriting { font-size: 23px; }
  .cp-mobile-hero__identity { flex-basis: auto; max-width: 190px; font-size: 8px; line-height: 1.8; }
  .cp-mobile-hero__actions { grid-area: 3 / 1; justify-items: start; gap: 16px; margin: 0; }
  .cp-mobile-hero__start { width: clamp(300px, 26vw, 340px); min-height: 54px; padding: 16px 18px; border-radius: 15px; font-size: clamp(14px, 1.2vw, 17px); gap: 15px; }
  .cp-mobile-hero__start:hover { filter: brightness(1.08); transform: translateY(-2px); }
  .cp-mobile-hero__telegram { font-size: clamp(12px, 1vw, 14px); gap: 10px; }
  .cp-mobile-hero__telegram-icon { width: 23px; height: 23px; }
  .cp-mobile-hero__telegram-icon svg { width: 16px; height: 16px; }
  .cp-mobile-hero__benefits {
    grid-area: 4 / 1 / 5 / 3;
    grid-template-columns: 1fr .95fr 1.12fr 1.45fr;
    margin: 8px 0 0;
    padding-top: 22px;
    border-top: 1px solid #d9bd811f;
  }
  .cp-mobile-hero__benefits li { gap: 12px; padding: 6px 25px; font-size: 12px; line-height: 1.45; }
  .cp-mobile-hero__benefits svg { width: 29px; height: 29px; stroke-width: 1.3; }
}

@media (min-width: 1400px) {
  .cp-mobile-hero { min-height: 730px; padding: 68px 64px 30px; column-gap: 22px; }
  .cp-mobile-hero__scene { min-height: 570px; margin-right: -48px; }
  .cp-mobile-hero__description { max-width: 440px; font-size: 16px; }
  .cp-mobile-hero__choices { max-width: 460px; }
  .cp-mobile-hero__choice { font-size: 12px; }
  .cp-mobile-hero__benefits li { font-size: 13px; }
}

@media (min-width: 992px) and (max-width: 1100px) {
  .cp-mobile-hero { padding-inline: 32px; column-gap: 6px; }
  .cp-mobile-hero__choice { font-size: 10px; }
  .cp-mobile-hero__benefits li { padding-inline: 16px; gap: 9px; font-size: 11px; }
  body.cp-studio-active .cp-mobile-hero { display: none; }
}

@media (max-width: 359px) {
  .cp-mobile-hero__intro { padding-inline: 13px; }
  .cp-mobile-hero__choices { margin-inline: 12px; gap: 4px; }
  .cp-mobile-hero__actions { margin-inline: 7%; }
  .cp-mobile-hero__benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 0; margin-inline: 22px; }
  .cp-mobile-hero__benefits li { min-height: 44px; gap: 9px; padding: 4px 10px; font-size: 10px; }
  .cp-mobile-hero__benefits li:nth-child(odd) { border-left: 0; padding-left: 0; }
  .cp-mobile-hero__benefits li:nth-child(even) { padding-right: 0; }
  .cp-mobile-hero__benefits svg { width: 24px; height: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .cp-mobile-hero *, .cp-mobile-hero *::after { animation: none !important; transition: none !important; }
  .cp-mobile-hero__scene::after { display: none; }
}
@keyframes cp-hero-ink-breathe {
  0%, 100% { opacity: .8; }
  50% { opacity: 1; }
}
@keyframes cp-hero-mist {
  from { transform: translate3d(-7px, 4px, 0); opacity: .14; }
  to { transform: translate3d(9px, -9px, 0); opacity: .3; }
}
@keyframes cp-hero-gold-sheen {
  0%, 78% { transform: translateX(-150%); }
  94%, 100% { transform: translateX(150%); }
}