html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
body {
  line-height: 1;
}
ol,
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.sidebar.active{

}
body {
  font-family: 'Drukewidecyr', sans-serif;
  font-weight: 600;
  background-color: #FCFCFC;
  color: #212121;
  margin: 1 1vw;

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

html::-webkit-scrollbar {
  display: none;
}

a { text-decoration: none; color: inherit; }
ul { list-style: none; }

.my-button-font{
  font-family: 'Drukewidecyr', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
}

.card-meta__avatar img{
border-radius: 10%;
  justify-content: center;
}

.hero-section {
  height: 100vh;
  width: 100%;
  position: relative;
  background-color: #FCFCFC;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border-bottom: 1px solid #FCFCFC;
}

.hero-loz{
  width: 20vw;
  font-family: 'Akzidenzgroteskpro', sans-serif;
  font-weight: 400;
  margin-left: -29.5vw;
  margin-top: 1.5vw;
  z-index: 100;
}



.hero-text{
  margin-top: 4vw;
  margin-left: -5vw;
  z-index: 100;
}

.big-arrow{
  margin-top: -10vw !important;
  margin-left: -5vw;
  z-index: 100;
}

.four-slide{
  margin-top: -9vw !important;
}

.hero-logo {
  z-index: 100;
}

.logo-section img{
  width: 12vw;
}

.hero-logo img {
  margin-top: -2vw;
  margin-left: -35vw;
}


.hero-top-nav {
  position: absolute;
  top: 2vw;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 18vw;
  z-index: 100;
}

.hero-top-nav a {
  font-size: 10vw;
  font-weight: 800;
  text-transform: uppercase;
  color: #212121;
  letter-spacing: 0.5px;
  transition: opacity 0.2s;
  text-decoration: none;
}

.promo-int-page {
  position: relative;
  width: 100%;
  display: flex;
  flex: 1;
  align-items: center;
  overflow: hidden;
  background: #FCFCFC;
  flex: 1;
  margin-top: 5vw;
  margin-left: -5vw;
  overflow: hidden;
  transition: background 0.3s ease;
  justify-content: space-between;
}

.promo-int-container {
  width: 100%;
  max-width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  position: relative;
  padding-left: clamp(2rem, 5vw, 4rem);
  padding-right: clamp(2rem, 5vw, 4rem);
}


.promo-int-content {
  width: 40vw;
  z-index: 2;
  position: relative;
  margin-bottom: 8vw;
}

.promo-int-title {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 clamp(1.5rem, 3vw, 2.5rem) 0;
  color: #212121;
  letter-spacing: -0.02em;
}

.promo-int-desc {
  font-family: 'Akzidenzgroteskpro', sans-serif !important;
  font-weight: 400;
  color: #212121;
  margin-top: 2vw;
  max-width: 45vw;
}

.promo-int-list {
  list-style: none;
  font-family: 'Akzidenzgroteskpro', sans-serif;
  font-weight: 400;
  margin-top: 2.5vw;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(0.75rem, 2vw, 1.25rem);
}

.promo-int-item {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
  font-size: clamp(0.875rem, 1.3vw, 1rem);
  line-height: 1.5;
  color: #1a1a1a;
}

.promo-int-arrow {
  flex-shrink: 0;
  width: clamp(1rem, 2vw, 1.5rem);
  height: clamp(1rem, 2vw, 1.5rem);
  color: #ff4453;
}


.promo-int-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: clamp(0.75rem, 1.5vw, 1rem) clamp(1.5rem, 3vw, 2rem);
  background-color: #212121;
  color: #ffffff;
  text-decoration: none;
  border-radius: 0.75rem;
  font-size: clamp(0.875rem, 1.2vw, 1rem);
  font-weight: 600;
  transition: all 0.3s ease;
  cursor: pointer;
  margin-top: 2.5vw;
}

.promo-int-btn:hover {
  background-color: #ca8448;
  color: #fcfcfc;
}

.promo-int-btn svg {
  width: clamp(1rem, 1.5vw, 1.25rem);
  height: clamp(1rem, 1.5vw, 1.25rem);
}


.promo-int-visual {
  object-fit: contain;
  position: absolute;
  margin-left: 38vw;
}

.promo-int-visual:hover{
  transform: scale(1.2);
  transition: transform 0.3s ease;
}
.promo-int-img {
  width: 45vw;
}


.sidebar-nav a,
.hero-top-nav a {
  display: inline-block;
  width: fit-content;
  box-sizing: border-box;

  /* 2. Текст и отступы */
  text-decoration: none;
  color: #212121;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 1rem;
  padding: 6px 10px;
  border: none;
  margin: 0;

  background-repeat: no-repeat;
  background-image:
          linear-gradient(#212121, #212121), linear-gradient(#212121, #212121),
          linear-gradient(#212121, #212121), linear-gradient(#212121, #212121),
          linear-gradient(#212121, #212121), linear-gradient(#000, #212121),
          linear-gradient(#212121, #212121), linear-gradient(#000, #212121);


  background-position:
          0 0, 0 0,
          100% 0, 100% 0,
          0 100%, 0 100%,
          100% 100%, 100% 100%;


  background-size:
          0 2px, 2px 0,
          0 2px, 2px 0,
          0 2px, 2px 0,
          0 2px, 2px 0;

  transition-property: background-size, color;
  transition-duration: 0.3s;
  transition-timing-function: ease-out;
}


.sidebar-nav a:hover,
.hero-top-nav a:hover {
  background-size:
          8px 2px, 2px 8px,
          8px 2px, 2px 8px,
          8px 2px, 2px 8px,
          8px 2px, 2px 8px;
}

.floating-icon {
  position: absolute;
  animation: float 3s ease-in-out infinite;
  transition: transform 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
  transform:
          translate(var(--move-x, 0rem), var(--move-y, 0rem))
          rotateX(var(--rot-x, 0deg))
          rotateY(var(--rot-y, 0deg));
}
.icon-1 img, .icon-2 img, .icon-3 img, .icon-4 img, .icon-5 img, .icon-6 img, .icon-7 img, .icon-8 img, .icon-9 img {
  width: 12vw;
}


.icon-1 { top: 10%; left: 55%; animation-delay: 0s; }
.icon-2 { top: 8%; left: 80%; animation-delay: 1s; }
.icon-3 { top: 25%; right: 20%; animation-delay: 0.5s; }
.icon-4 { top: 40%; right: 30%; animation-delay: 1.5s; }
.icon-5 { bottom: 28%; right: 15%; animation-delay: 0.2s; }
.icon-6 { bottom: 3%; left: 85%; animation-delay: 1.2s; }
.icon-7 { top: 70%; left: 55%; animation-delay: 0.8s; }
.icon-8 { bottom: 1%; left: 72%; animation-delay: 1.8s; }
.icon-9 { bottom: 40%; left: 85%; animation-delay: 0.4s; }


@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
  100% { transform: translateY(0px); }
}


.main-wrapper {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: 18vw;
  height: 100vh;
  position: sticky;
  top: 0;
  background: #FCFCFC;
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-shrink: 0;
}

.sidebar-logo img {
  width: 10vw;
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: -2px;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 1.3vw;
}

.sidebar-nav a {
  font-size: 0.9rem;
  font-weight: 800;
  text-transform: uppercase;
  color: #212121;
}

.sidebar-footer {
  width: 18vw;
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #212121;
  /*line-height: 1.4;*/
}


.content {
  padding: 2vw;
  background: #FCFCFC;
  overflow: hidden;
}


.top-content-grid {
  display: flex;
  gap: 3vw;
  margin-bottom: 2vw;
  align-items: stretch;
}


.categories-list {
  flex: 0 0 30vw;
  border: 1px solid #212121;
  display: flex;
  flex-direction: column;
}

.cat-item {
  padding: 1.3vw 1vw;
  border-bottom: 1px solid #212121;
  font-weight: 700;
  font-size: 1.2rem;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  background: #FCFCFC;
}

.cat-item:last-child {
  border-bottom: none;
}


.cat-item.active {
  font-weight: 900;
  padding-left: 1.5vw;
}


.cat-item.active::after {
  content: '➔';
  position: absolute;
  right: 1.2vw;
  font-weight: 900;
}


.promo-banner {
  flex: 1;
  /*background: linear-gradient(135deg, #ff9a9e 0%, #ff5e62 100%);*/
  padding: 1.2vw;
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  transition: background 0.3s ease;
  display: flex;
  justify-content: space-between;
}

.banner-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: start;
  height: 100%;
  padding-bottom: 2vw;
}

.promo-banner h2 {
  font-size: 2rem;
  margin-bottom: 1.2vw;
  line-height: 1.1;
  font-weight: 900;
}



.steps p, #banner-desc p {
  font-family: 'Akzidenzgroteskpro', sans-serif;
  font-size: 1.3vw;
  margin-bottom: 0.5vw;
  font-weight: 400;
  line-height: 1.5;
  width: 35vw;
}

.steps {
  /*justify-content: start;*/
}

.btn-black {
  display: inline-block;
  font-family: 'Akzidenzgroteskpro', sans-serif;
  background: #212121;
  color: #FCFCFC;
  padding: 0.5vw 2vw;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  margin-top: 9vw;
  border-radius: 10px;
  border: none;
  text-wrap: nowrap;
  cursor: pointer;
  width: fit-content;
  text-decoration: none;
}

.banner-btn{
  display: inline-block;
  font-family: 'Akzidenzgroteskpro', sans-serif;
  background: #212121;
  color: #FCFCFC;
  padding: 0.5vw 2vw;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  margin-top: auto !important;
  border-radius: 10px;
  border: none;
  text-wrap: nowrap;
  cursor: pointer;
  width: fit-content;
  text-decoration: none;
  align-items: end;
}

.banner-btn img{
  align-items: center;
  width: 0.7rem;
  margin-left: 0.2rem;
  margin-top: 0.5vw;
}

.btn-black img{
  align-items: center;
  width: 0.7rem;
  margin-left: 0.2rem;
  margin-top: 0.5vw;
}


.computer-img-placeholder img{
  width: 100%;
  height: 150vw;
  opacity: 0.8;
  position: absolute;
  right: 2vw;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}


.banner-image {
  width: 100vw;
  object-fit: contain;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transform-origin: center center;
}

.zoom-active {
  transform: scale(1.5);

}

.scale-up {
  transform: scale(1.3) rotate(-5deg);
}




.section-title {
  font-size: 2rem;
  font-weight: 900;
  margin-bottom: 1.5vw;
}


.cards-grid {
  display: grid;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 3vw;
  scroll-behavior: smooth;
}

.cards-grid::-webkit-scrollbar {
  display: none;
}

.card {
  height: 20vw;
  width: 35vw;
  padding: 20px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  scroll-snap-align: start;
}

.card-blue { background-color: #64b5f6; border-radius: 10px;}
.card-orange { background-color: #ffb74d; border-radius: 10px;}
.card-green { background-color: #aed581; border-radius: 10px; }
.card-pink{background-color: #FF768D; border-radius: 10px;}
.card-turquoise{background-color: #80EAFF; border-radius: 10px;}

.card-header {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-weight: 800;
  font-size: 1.2rem;
}

.text{
  font-family: 'Akzidenzgroteskpro', sans-serif;
  font-size: 1vw;
  font-weight: 200;
  margin-top: 0.5vw;
}

.corner-icon {
  font-size: 1.5rem;
  line-height: 1vw;
}

.card-img-placeholder img {
 width: 15vw;
  margin-left: 8vw;
  margin-top: -6vw;
  text-align: center;
  opacity: 0.6;
  position: absolute;
}

.card-img-placeholder-trends img{
  width: 18vw;
  /*margin-top: -5vw;*/
  margin-left: 14vw;
  text-align: center;
  opacity: 0.6;
  position: absolute;
}

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.theme{
  margin-top: 8vw;
  margin-left: 2vw;
}

.icon-sq {
  background: #222;
  color: #FCFCFC;
  border-radius: 5px;
  width: 2vw;
  height:2vw;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 600;
}

.btn-read {
  background: #222;
  color: #FCFCFC;
  border-radius: 10px;
  padding: 0.5vw 2vw;
  font-size: 1.2rem;
  font-weight: 500;
  align-items: center;
}

.btn-read:hover {
  background: #3a3939;
}

.btn-read img{
  width: 1vw;
  position: absolute;
  margin-top: 0.4vw;
  margin-left: 0.5vw;
}


.trends-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 3vw;
}

.trend-grid-two{
  width: 78vw;
  display: grid;
  width: 100% !important;
  grid-template-columns: repeat(4, 0.5fr);
  gap: 1vw;
  margin-bottom: 3vw;
}

.trend-card {
  background: #eeeeee;
  padding: 1.5vw;
  height: 20vw;
  display: flex;
  background-color: #eeeeee;
  border-radius: 10px;
  flex-direction: column;
  justify-content: space-between;
}

.trend-card-two {
  padding: 1vw;
  height: 18vw;
  width: 16vw;
  display: flex;
  background-color: #eeeeee;
  border-radius: 10px;
  flex-direction: column;
  justify-content: space-between;
}

.trend-card h3 {
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.4;
}

.btn-read-sm {
  background: #212121;
  font-family: 'Akzidenzgroteskpro', sans-serif;
  color: #FCFCFC;
  padding: 0.6vw 0;
  border-radius: 10px;
  text-align: center;
  font-size: 1.2rem;
  font-weight: 600;
  align-items: center;
  width: 100%;
  gap: 1vw;
}

.small-arrow{
  width: 1vw;
}

.trend-img{
  width: 8vw;
  margin-top: 0.5vw;
  margin-left: 4vw;
}

.trend-img-two {
  width: 10vw;
  margin-top: 0.5vw;
  margin-left: 2.5vw;
}

.card .card-img-placeholder img {
  transition: transform 0.3s ease-out;
  display: block;
}


.card:hover .card-img-placeholder img {
  transform: scale(1.5);
  transition: transform 0.3s ease;
}
.content-footer {
padding: 2vw 0;
  width: 50vw;
  border-top: 2px solid #212121;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.content-footer-main{
  width: 75vw;
  padding: 2vw 0;
  border-top: 2px solid #212121;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer-logo img{
  width: 8vw;
}

.footer-line {
  width: 1vw;
  flex-grow: 1;
  height: 0.2vw;
  background: #212121;
}

.footer-line-main img{
  width: 8vw;
  /*flex-grow: 0.5;*/
  /*height: 2px;*/
  /*background: #000;*/
}

.footer-slogan-main {
  font-size: 1vw;
  color: #212121;
  width: auto;
  font-weight: 800;
  text-transform: uppercase;
  text-wrap: nowrap;
  margin-left: 2vw;
}

.footer-slogan {
  font-size: 1vw;
  color: #212121;
  font-weight: 800;
  text-transform: uppercase;
  margin-right: 1vw;
}

.footer-buttons {
  margin-top: -10vw;
  display: flex;
  gap: 10px;
}

.footer-buttons-main{
  margin-top: -10vw;
  display: flex;
  gap: 10px;
}


a { text-decoration: none; color: inherit; }

.sidebar {
  width: 21vw;
  height: 100vh;
  position: sticky;
  top: 0;
  background: #FCFCFC;
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-shrink: 0;
}

.sidebar-logo {
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: -3px;
  margin-bottom: 1.9vw;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.nav-link {
  font-size: 1.2rem;
  font-weight: 800;
  text-transform: uppercase;
  color: #212121;
  display: inline-block;
  transition: 0.3s;
}

.nav-link.active::before {
  content: '[';
  margin-right: 5px;
  transform: translateY(-1px);
  display: inline-block;
}

.nav-link.active::after {
  content: ']';
  margin-left: 5px;
  transform: translateY(-1px);
  display: inline-block;
}


.nav-link:hover {
  opacity: 0.6;
}

.page-title {
  font-size: 2vw;
  font-weight: 900;
  margin-bottom: 2.5vw;
}

.brackets {
  font-weight: 300;
}


.catalog-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 3vw;
}

.cat-card {
  border-radius: 10px;
  width: 38vw;
  height: 12vw;
  padding: 0 3vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s;
  cursor: pointer;
}

.cat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.cat-card .card-icon img {
  object-fit: contain;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
}

.cat-card:hover .card-icon img {
  transform: rotate(20deg) scale(1.5);
}

.card-title {
  font-size: 1.2rem;
  font-weight: 800;
  color: #212121;
  z-index: 2;
  line-height: 1.2;
}


.card-icon img {
  width: 12vw;
  opacity: 0.9;
}


.bg-blue { background-color: #61b3ff; } /* IT */
.bg-orange { background-color: #ff914d; } /* Маркетинг */
.bg-pink { background-color: #ff758c; } /* Креатив */
.bg-cyan { background-color: #80deea; } /* Медицина */
.bg-beige { background-color: #e6cba5; } /* Естественные науки */
.bg-mint { background-color: #87e3bc; } /* Точные науки */
.bg-yellow { background-color: #ffd561; } /* Финансы */
.bg-grey-blue { background-color: #c5d3e8; } /* Строительство */
.bg-salmon { background-color: #f59679; } /* Образование */
.bg-green { background-color: #aed581; } /* Экология */

.professions-grid {
  margin: 2vw 0 !important;
  display: grid;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 0.2vw;
  max-width: 70vw !important;
  align-items: start;
}

.filter-buttons{
  margin-top: 2vw;
}

.btn-filter{
  width: 11vw;
  padding: 0.8rem 0.5rem !important;
  font-family: 'Druk Wide Cyr', sans-serif;
  font-weight: 900;
  border-radius: 5px;
  background-color: #FCFCFC;
  color: #212121;
  border: none;
  font-size: 1rem;

}

.btn-filter:hover{
  border: #212121 solid 1px;
}

.card-filter {
  margin-top: 2vw;
  border-radius: 10px;
  padding: 0.5vw;
  transition: transform 0.3s ease, opacity 0.3s ease;
  width: 17vw;
  height: 15vw;
  box-sizing: border-box;
}


.card-filter.hidden {
  display: none;
}


.btn-filter.active {
  background-color: #212121;
  color: #FCFCFC;
}

.card-filter[data-category="marketing"] { background-color: #ff914d; }
.card-filter[data-category="it"] { background-color: #61b3ff; }
.card-filter[data-category="creative"] { background-color: #ff758c;  }
.card-filter[data-category="medicine"] { background-color: #80deea;  }
.card-filter[data-category="finance"] { background-color: #ffd561;  }
.card-filter[data-category="accurate"] { background-color: #87e3bc;  }
.card-filter[data-category="education"] { background-color: #f59679;  }
.card-filter[data-category="eco"] { background-color: #aed581; }
.card-filter[data-category="construction"] { background-color: #c5d3e8;  }

.card-filter img{
  width: 11vw;
  margin-left: 5vw;
  margin-top: 1vw;
}
.card-filter img:hover {
  transform: scale(1.2);
  transform: translateY(20deg);
  transition: transform 0.3s ease;
}
.prb img{
  margin: -1vw 1.5vw;
  width: 15vw !important;
}

.card-filter a{
  color: inherit !important;
  text-decoration: none !important;
}



.about-layout {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 60px;
  margin-bottom: 3vw;
  position: relative;
  z-index: 2;
}

.about-text {
  flex: 0 0 60%;
  max-width: 35vw;
}

.text-section {
  margin-bottom: 4vw;
}

.text-section h2 {
  font-size: 1.5rem;
  font-weight: 900;
  margin-bottom: 1vw;
  letter-spacing: -1px;
}

.text-section p {
  font-family: 'Akzidenzgroteskpro', sans-serif;
  font-weight: 500;
  font-size: 1.2rem;
  line-height: 1.6;
  color: #333;
  font-weight: 400;
}

.mt-20 {
  margin-top: 1vw;
}

.who-list {
  list-style: none;
  padding: 0;
}

.who-list li {
  font-family: 'Akzidenzgroteskpro', sans-serif;
  font-weight: 500;
  position: relative;
  padding-left: 3vw;
  margin-bottom: 1.5vw;
  font-size: 1.2rem;
  line-height: 1.5;
  color: #212121;
}

.styleguide-link a{
  text-decoration: underline;
  margin-bottom: 2vw;
  font-size: 1.1rem;
}

.small-text{
  margin-top: 1.5vw;
  font-weight: 600;
  font-size: 1.1rem;
}
.who-list li::before {
  content: '➔';
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 900;
  font-size: 1.2rem;
}

/* Цвета стрелочек */
.arrow-blue::before { color: #64b5f6; }
.arrow-orange::before { color: #ff914d; }
.arrow-green::before { color: #aed581; }


.about-visuals {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
}

.visual-item {
  font-size: 120px;
  opacity: 0.9;
  filter: drop-shadow(5px 10px 15px rgba(0,0,0,0.1));
}

.pills-decoration {
  position: absolute;
  bottom: 8.3vw;
  right: 2.5vw;
  font-size: 7vw;
  z-index: 1;
  transform: rotate(-15deg);
  opacity: 0.8;
  pointer-events: none;
}


.float-fast { animation: float 4s ease-in-out infinite; }
.float-medium { animation: float 6s ease-in-out infinite; }
.float-slow { animation: float 8s ease-in-out infinite; }

@keyframes float {
  0% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(2deg); }
  100% { transform: translateY(0px) rotate(0deg); }
}

.logo-nav-nav{
  width: 10vw;
}


.about-layout {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 60px;
  margin-bottom: 2.5vw;
  position: relative;
  z-index: 2;
}



.about-text {
  flex: 0 0 60%;
  max-width: 50vw;
}

.text-section {
  margin-bottom: 1.5vw;
}

.text-section h2 {
  font-size: 1.5rem;
  font-weight: 900;
  margin-bottom: 20px;
  letter-spacing: -1px;
}

.text-section p {
  font-size: 16px;
  line-height: 1.6;
  color: #333;
  font-weight: 400;
}

.mt-20 {
  margin-top: 20px;
}


.who-list {
  list-style: none;
  padding: 0;
}

.who-list li {
  position: relative;
  padding-left: 35px;
  margin-bottom: 15px;
  font-size: 16px;
  line-height: 1.5;
  color: #222;
}


.who-list li::before {
  content: '➔';
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 900;
  font-size: 18px;
}

.arrow-blue::before { color: #64b5f6; }
.arrow-orange::before { color: #ff914d; }
.arrow-green::before { color: #aed581; }


.about-visuals {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;

}

.visual-item {
  font-size: 120px;
  opacity: 0.9;
  filter: drop-shadow(5px 10px 15px rgba(0,0,0,0.1));
}


.pills-decoration {
  position: absolute;
  bottom: 120px;
  right: 50px;
  font-size: 100px;
  z-index: 1;
  transform: rotate(-15deg);
  opacity: 0.8;
  pointer-events: none;
}


.float-fast { animation: float 4s ease-in-out infinite; }
.float-medium { animation: float 6s ease-in-out infinite; }
.float-slow { animation: float 8s ease-in-out infinite; }

@keyframes float {
  0% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(2deg); }
  100% { transform: translateY(0px) rotate(0deg); }
}


.back-link {
  font-weight: 800;
  font-size: 18px;
  margin-bottom: 30px;
  display: inline-block;
}

.no-margin {
  margin-top: 0;
}


.details-container {
  display: flex;
  gap: 60px;
  position: relative;
}


.details-info {
  flex: 2;
  max-width: 800px;
}

.intro-text {
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 40px;
}

.info-section {
  margin-bottom: 50px;
}

.info-section h2 {
  font-size: 28px;
  font-weight: 900;
  margin-bottom: 20px;
}

.info-section p {
  font-size: 16px;
  line-height: 1.6;
}


.skills-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  list-style: none;
}

.skills-list li {
  font-weight: 600;
  position: relative;
  padding-left: 25px;
}

.skills-list li::before {
  content: '→';
  color: #64b5f6;
  font-weight: 900;
  position: absolute;
  left: 0;
}


.professions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px 40px;
}

.professions-grid a {
  text-decoration: underline;
  text-underline-offset: 3px;
  color: #212121;
  font-weight: 500;
  font-size: 15px;
}

.professions-grid a:hover {
  color: #64b5f6;
}


.details-visual {
  flex: 1;
  position: sticky;
  top: 40px;
  height: fit-content;
  padding: 40px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}


.blue-corner {
  position: absolute;
  width: 20px;
  height: 20px;
  border: 4px solid #64b5f6;
  border-radius: 4px;
}

.top-left { top: 0; left: 0; border-right: none; border-bottom: none; }
.top-right { top: 0; right: 0; border-left: none; border-bottom: none; }
.bottom-left { bottom: 0; left: 0; border-right: none; border-top: none; }
.bottom-right { bottom: 0; right: 0; border-left: none; border-top: none; }


.visual-arrow-large {
  font-size: 100px;
  margin-bottom: 10px;
  transform: rotate(-15deg);
  color: #64b5f6;
  text-shadow: 2px 4px 0px #1e88e5;
}

.about-img{
width: 10vw;
}

.visual-title {
  font-size: 24px;
  font-weight: 900;
  margin-bottom: 20px;
  border-bottom: 2px solid #64b5f6;
  padding-bottom: 5px;
  width: 100%;
  text-align: center;
}


.note-board {
  border: 2px dashed #64b5f6;
  border-radius: 8px;
  padding: 20px;
  width: 100%;
  position: relative;
  margin-bottom: 20px;
  background: #FCFCFC;
}

.note-header {
  background: #64b5f6;
  color: #FCFCFC;
  font-weight: 700;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 4px;
  display: inline-block;
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
}

.note-flow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
}

.note-step {
  border: 1px solid #212121;
  border-radius: 20px;
  padding: 5px 15px;
  font-weight: 700;
  font-size: 12px;
  background: #FCFCFC;
  transform: rotate(-2deg);
}

.note-step:nth-child(3) { transform: rotate(2deg); }

.arrow-down {
  font-weight: 900;
  font-size: 14px;
}


.btn-blue-save {
  background: #64b5f6;
  color: #FCFCFC;
  font-weight: 900;
  border: none;
  padding: 10px 0;
  width: 100%;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  transition: background 0.3s;
}

.btn-blue-save:hover {
  background: #42a5f5;
}


.inner-footer-wrapper {
  margin-top: 80px;
}

.footer-slogan-bottom {
  margin-top: 20px;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 12px;
  text-align: right;
  width: 100%;
  display: flex;
  justify-content: flex-start;
}
.inner-footer-wrapper .content-footer {
  border-top: 2px solid #212121;
  padding-top: 20px;
}

.ax-layout {
  display: grid;
  grid-template-columns: var(--ax-sidebar-w) 1fr var(--ax-right-w);
  height: 100vh;
  max-width: 1920px;
  margin: 0 auto;
}


.ax-sidebar-left {
  background: #FCFCFC;
  padding: 40px 20px;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
  border-right: 1px solid transparent;
}

.ax-sidebar-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-between;
}

.ax-logo {
  font-weight: 800;
  font-size: 42px;
  letter-spacing: -2px;
  text-transform: lowercase;
}

.ax-nav__list { list-style: none; margin-top: 40px; }
.ax-nav__item { margin-bottom: 20px; font-weight: 700; text-transform: uppercase; font-size: 14px; display: flex; align-items: center; }
.ax-nav__link { text-decoration: none; color: inherit; transition: 0.2s; }
.ax-nav__link:hover { color: var(--ax-blue); }
.ax-bracket { margin: 0; transition: opacity 0.2s; }
.ax-nav__item--active .ax-bracket { opacity: 1; }

.ax-slogan {
  font-size: 1.2rem;
  line-height: 1.4;
  font-weight: 700;
  text-transform: uppercase;
  margin-top: auto;
}


.ax-center-scroll {
  height: 100vh;
  overflow-y: scroll;
  overflow-x: hidden;
  padding: 40px 60px;
  margin-left: -2.5vw;
  scrollbar-width: thin;
  scrollbar-color: #FCFCFC transparent;
}

.ax-center-scroll::-webkit-scrollbar { width: 6px; }
.ax-center-scroll::-webkit-scrollbar-thumb { background-color: #FCFCFC; border-radius: 4px; }

.ax-content-wrapper {
  max-width: 800px;
  margin: 0 auto;
}

/* Хедер центра */
.ax-header { margin-bottom: 50px; }
.ax-back-link {
  text-decoration: none; color: var(--ax-text);
 font-weight: 700; font-size: 24px;
  display: flex; align-items: center; gap: 10px;
}

/* Статья */
.ax-hero-title, .ax-section-title {
  font-size: 2.3vw;
  font-weight: 600;
  margin-bottom: 2vw;
  margin-top: 1vw;
}

.article img{
  width: 1.5vw;
  transform: rotateY(-180deg);
  align-items: center;
  margin-top: 0.3vw;
}

.ax-hero-title{
  display: inline-flex;
  align-items: center;
  gap: 1rem;
}

.ax-bracket {
  height: 3rem;
  width: auto;
  flex-shrink: 0;
}


.ax-intro-text, .ax-list-checked, .ax-text, .ax-professions-list {
  font-family: 'Akzidenzgroteskpro', sans-serif !important;
  font-weight: 400;
  line-height: 21px;
  font-size: 1.2vw;
  margin-bottom: 50px;
}

.ax-intro-text-trends{
  font-family: "Druk Wide Cyr" sans-serif;
  font-weight: 800;
  font-size: 1.2vw;
  margin-bottom: 2vw;
}

.ax-section-title {
  font-size: 32px;
  font-weight: 800;
  margin-bottom: 25px;
}

.ax-text { font-size: 16px; line-height: 1.6; }

/* Списки */
.ax-grid-2-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

.ax-list-checked, .ax-list-checked-orange, .ax-list-checked-rose, .ax-list-checked-turquoise, .ax-list-checked-yellow, .ax-list-checked-trew, .ax-list-checked-green, .ax-list-checked-bej, .ax-list-checked-brown, .ax-list-checked-ser {
  list-style: none;
  width: 28vw;
  font-family: 'Akzidenzgroteskpro', sans-serif !important;
  font-weight: 400;
}

.ax-list-checked li, .ax-list-checked-orange li, .ax-list-checked-rose li, .ax-list-checked-turquoise li, .ax-list-checked-yellow li, .ax-list-checked-trew li, .ax-list-checked-green li, .ax-list-checked-bej li, .ax-list-checked-brown li, .ax-list-checked-ser li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 12px;
  font-size: 16px;
}


.ax-list-checked li::before {
  content: '➔'; color: #5BB2FF;
  position: absolute;
  left: 0;
  font-weight: bold;
}

.ax-list-checked-brown li::before {
  content: '➔'; color: #F18E6D;
  position: absolute;
  left: 0;
  font-weight: bold;
}
.ax-list-checked-orange li::before {
  content: '➔'; color: #FF8C3F;
  position: absolute;
  left: 0;
  font-weight: bold;
}

.ax-list-checked-turquoise li::before {
  content: '➔'; color: #80EAFF;
  position: absolute;
  left: 0;
  font-weight: bold;
}

.ax-list-checked-ser li::before {
  content: '➔'; color: #C2D3E5;
  position: absolute;
  left: 0;
  font-weight: bold;
}

.ax-list-checked-rose li::before {
  content: '➔'; color: #FF768D;
  position: absolute;
  left: 0;
  font-weight: bold;
}

.ax-list-checked-yellow li::before {
  content: '➔'; color: #FFCD55;
  position: absolute;
  left: 0;
  font-weight: bold;
}

.ax-list-checked-trew li::before {
  content: '➔'; color: #9CD75D;
  position: absolute;
  left: 0;
  font-weight: bold;
}

.ax-list-checked-green li::before {
  content: '➔'; color: #5BB2FF;
  position: absolute;
  left: 0;
  font-weight: bold;
}

.ax-list-checked-bej li::before {
  content: '➔'; color: #E6BB77;
  position: absolute;
  left: 0;
  font-weight: bold;
}

.ax-professions-list ul { list-style: none; }
.ax-professions-list li { margin-bottom: 10px; }
.ax-professions-list a {
  color: #212121;
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color 0.2s;
}
.ax-professions-list a:hover { color: var(--ax-blue); }

/* --- Footer (Внутри скролла) --- */
.ax-footer {
  margin-top: 100px;
  padding-top: 40px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}
.ax-logo--footer { font-size: 48px; }
.ax-footer__mid-text {
  font-weight: 700; font-size: 14px;
  margin-left: 20px; display: inline-block; max-width: 200px;
}
.ax-footer__buttons { display: flex; gap: 10px; }
.ax-btn-black {
  background: #1a1a1a; color: #FCFCFC; padding: 12px 20px;
  text-decoration: none;
  font-size: 12px; font-weight: 700; border-radius: 8px;
  transition: background 0.2s;
}
.ax-btn-black:hover { background: #212121; }

/* --- Правая Колонка (Фиксированная) --- */
.ax-sidebar-right {
  background: #FCFCFC;
  /*padding: 60px 40px;*/
  height: 100%;
  width: 25vw;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ax-cursor-3d img {
  width: 8vw;
}

/* Виджет заметок */
.ax-widget-box {
  width: 100%;
  margin-top: 5vw;
  text-align: center;
}

.ax-widget-header {
  position: relative;
  margin-top: -4vw;
  margin-bottom: 0.5vw;
  gap: 5vw;
}
.ax-widget-header h3 {
  font-weight: 800;
  font-size: 1.5vw;

}

/* Декоративные уголки */
.ax-border-corner {
  position: absolute; width: 15px; height: 15px;
  border: 2px dashed var(--ax-blue);
}
.tl { top: 0; left: 0; border-right: none; border-bottom: none; }
.tr { top: 0; right: 0; border-left: none; border-bottom: none; }
.bl { bottom: 0; left: 0; border-right: none; border-top: none; }
.br { bottom: 0; right: 0; border-left: none; border-top: none; }

.ax-widget-body {
  border: 2px dashed #b3d7ff;
  border-top: none;
  margin: 15px 5px 20px 5px;
  padding: 30px 10px;
  min-height: 10vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  border-radius: 0 0 4px 4px;
}

.orange{
  border: 2px dashed #FF8C3F;
}

.rose{
  border: 2px dashed #FF768D;
}

.turquoise{
  border: 2px dashed #80EAFF;
}

.yellow{
  border: 2px dashed #FFCD55;
}

.trew{
    border: 2px dashed #80DDBF;
}

.green{
  border: 2px dashed #9CD75D;
}

.bej{
  border: 2px dashed #E6BB77;
}

.brown{
  border: 2px dashed #F18E6D;
}

.ser{
  border: 2px dashed #C2D3E5;
}

.ax-pill {
  background: #FCFCFC; border: 2px solid #212121;
  border-radius: 30px; padding: 8px 16px;
  font-weight: 600; font-size: 13px;
  box-shadow: 2px 2px 0 #212121;
  display: inline-block;
}
.ax-pill-blue {
  color: #212121;
  border-color: var(--ax-blue);
  box-shadow: none;
}

.ax-pill-orange {
  color: #FF8C3F;
  border-color: var(--ax-blue);
  box-shadow: none;
}

.ax-pill-rose {
  color: #FF768D;
  border-color: var(--ax-blue);
  box-shadow: none;
}

.ax-pill-turquoise {
  color: #80EAFF;
  border-color: var(--ax-blue);
  box-shadow: none;
}

.ax-pill-yellow {
  color: #FFCD55;
  border-color: var(--ax-blue);
  box-shadow: none;
}

.ax-pill-trew{
  color: #80DDBF;
  border-color: var(--ax-blue);
  box-shadow: none;
}

.ax-pill-green{
  color: #9CD75D;
  border-color: var(--ax-blue);
  box-shadow: none;
}

.ax-pill-bej{
  color: #E6BB77;
  border-color: var(--ax-blue);
  box-shadow: none;
}

.ax-pill-brown{
  color: #F18E6D;
  border-color: var(--ax-blue);
  box-shadow: none;
}


.ax-rotate-left { transform: rotate(-3deg); }
.ax-rotate-right { transform: rotate(2deg); }

.ax-arrow-down { font-weight: bold; font-size: 18px; }

.ax-btn-save {
  width: 100%;
  margin-top: 0.5vw;
  font-family: 'Druk Wide Cyr', sans-serif !important;
  background: #358be6;
  color: #212121;
  border: none;
  padding: 15px;
  border-radius: 8px;
  font-size: 1vw;
  font-weight: 600;
  cursor: pointer;
  text-transform: uppercase;
}
.ax-btn-save:hover { background: #1e4b7c; }

.ax-btn-save-brown {
  width: 100%;
  margin-top: 0.5vw;
  font-family: 'Druk Wide Cyr', sans-serif !important;
  background: #F18E6D;
  color: #212121;
  border: none;
  padding: 15px;
  border-radius: 8px;
  font-size: 1vw;
  font-weight: 600;
  cursor: pointer;
  text-transform: uppercase;
}
.ax-btn-save-brown:hover { background: #5b392e; }

.ax-btn-save-ser {
  width: 100%;
  margin-top: 0.5vw;
  font-family: 'Druk Wide Cyr', sans-serif !important;
  background: #C2D3E5;
  color: #212121;
  border: none;
  padding: 15px;
  border-radius: 8px;
  font-size: 1vw;
  font-weight: 600;
  cursor: pointer;
  text-transform: uppercase;
}
.ax-btn-save-ser:hover { background: #4e5b69; }

.ax-btn-save-orange {
  width: 100%;
  margin-top: 0.5vw;
  font-family: 'Druk Wide Cyr', sans-serif !important;
  background: #FF8C3F;
  color: #212121;
  border: none;
  padding: 15px;
  border-radius: 8px;
  font-size: 1vw;
  font-weight: 600;
  cursor: pointer;
  text-transform: uppercase;
}
.ax-btn-save-orange:hover { background: #935226; }

.ax-btn-save-rose {
  width: 100%;
  margin-top: 0.5vw;
  font-family: 'Druk Wide Cyr', sans-serif !important;
  background: #FF768D;
  color: #212121;
  border: none;
  padding: 15px;
  border-radius: 8px;
  font-size: 1vw;
  font-weight: 600;
  cursor: pointer;
  text-transform: uppercase;
}
.ax-btn-save-rose:hover { background: #91283b; }

.ax-btn-save-turquoise {
  width: 100%;
  margin-top: 0.5vw;
  font-family: 'Druk Wide Cyr', sans-serif !important;
  background: #80EAFF;
  color: #212121;
  border: none;
  padding: 15px;
  border-radius: 8px;
  font-size: 1vw;
  font-weight: 600;
  cursor: pointer;
  text-transform: uppercase;
}
.ax-btn-save-turquoise:hover { background: #2d7a88; }

.ax-btn-save-yellow {
  width: 100%;
  margin-top: 0.5vw;
  font-family: 'Druk Wide Cyr', sans-serif !important;
  background: #FFCD55;
  color: #212121;
  border: none;
  padding: 15px;
  border-radius: 8px;
  font-size: 1vw;
  font-weight: 600;
  cursor: pointer;
  text-transform: uppercase;
}
.ax-btn-save-yellow:hover { background: #b69239; }

.ax-btn-save-green {
  width: 100%;
  margin-top: 0.5vw;
  font-family: 'Druk Wide Cyr', sans-serif !important;
  background: #9CD75D;
  color: #212121;
  border: none;
  padding: 15px;
  border-radius: 8px;
  font-size: 1vw;
  font-weight: 600;
  cursor: pointer;
  text-transform: uppercase;
}
.ax-btn-save-green:hover { background: #537330; }

.ax-btn-save-bej {
  width: 100%;
  margin-top: 0.5vw;
  font-family: 'Druk Wide Cyr', sans-serif !important;
  background: #E6BB77;
  color: #212121;
  border: none;
  padding: 15px;
  border-radius: 8px;
  font-size: 1vw;
  font-weight: 600;
  cursor: pointer;
  text-transform: uppercase;
}
.ax-btn-save-green:hover { background: #6c5735; }

.ax-btn-save-trew {
  width: 100%;
  margin-top: 0.5vw;
  font-family: 'Druk Wide Cyr', sans-serif !important;
  background: #80DDBF;
  color: #212121;
  border: none;
  padding: 15px;
  border-radius: 8px;
  font-size: 1vw;
  font-weight: 600;
  cursor: pointer;
  text-transform: uppercase;
}
.ax-btn-save-trew:hover { background: #386c5c; }

/*test*/
.ax-layout {
  display: grid;
  grid-template-columns: var(--w-sidebar) 1fr var(--w-right);
  height: 100vh;
  width: 100%;
}

/* --- Левый Сайдбар --- */
.ax-sidebar-left {
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}
.ax-logo {
  font-weight: 800;
  font-size: 48px;
  letter-spacing: -2px;
}
.ax-menu ul { list-style: none; }
.ax-menu li {
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 24px;
  text-transform: uppercase;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.ax-menu a { text-decoration: none; color: inherit; transition: 0.2s; }
.ax-menu li:hover a { color: var(--theme-color); }
.ax-menu .bracket { opacity: 0; margin: 0 2px; transition: 0.2s; }
.ax-menu li.active .bracket { opacity: 1; }

.ax-slogan {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.4;
}

.ax-main-scroll {
  height: 100vh;
  overflow-y: auto;
  padding: 40px 60px;
  scrollbar-width: thin;
  scrollbar-color: #FCFCFC transparent;
}
.ax-content-container {
  max-width: 800px;
  margin: 0 auto;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.ax-header { margin-bottom: 30px; }
.ax-back-link {
  font-weight: 700;
  font-size: 20px;
  text-decoration: none; color: var(--text-color);
  align-items: center;
}


.ax-quiz-area { flex-grow: 1; }

.ax-title-wrap {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 40px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.ax-brace {
  font-family: 'Druk Wide Cyr', sans-serif;
  font-weight: 800;
  font-size: 1.2 rem;
}

.ax-question-text {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 30px;
}

/* Варианты ответов */
.ax-options-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 40px;
}

.ax-option {
  display: flex;
  align-items: center;
  gap: 20px;
  cursor: pointer;
  group: pointer;
}
.ax-option input { display: none; }


.ax-letter-box {
  width: 44px;
  height: 44px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
  transition: all 0.2s ease;
}


.corner {
  position: absolute;
  width: 8px;
  height: 8px;
  border: 2px solid #1a1a1a;
  transition: opacity 0.2s;
}
.tl { top: 0; left: 0; border-right: none; border-bottom: none; border-top-left-radius: 2px; }
.tr { top: 0; right: 0; border-left: none; border-bottom: none; border-top-right-radius: 2px; }
.bl { bottom: 0; left: 0; border-right: none; border-top: none; border-bottom-left-radius: 2px; }
.br { bottom: 0; right: 0; border-left: none; border-top: none; border-bottom-right-radius: 2px; }


.ax-option input:checked + .ax-letter-box {
  background-color: var(--theme-color);
  color: #000000;
  border-radius: 6px;
}
.ax-option input:checked + .ax-letter-box .corner {
  opacity: 0;
}
.ax-option-text { font-size: 1.1rem; font-family: 'Akzidenzgroteskpro', sans-serif; font-weight: 500; }


.ax-nav-btns { display: flex; gap: 10px; margin-top: 20px; }
.ax-btn {
  border: none;
  font-family: 'Akzidenzgroteskpro', sans-serif;
  padding: 0.8vw 2vw;
  border-radius: 6px;
  font-weight: 900;
  font-size: 0.8rem;
  text-transform: uppercase;
  cursor: pointer;
  transition: 0.2s;
}
.ax-btn-prev { background: #FCFCFC; color: #888; }
.ax-btn-prev:hover { background: #ccc; color: #000; }

.ax-btn-next {
  background: var(--theme-color);
  color: #000000;
}
.ax-btn-next:hover { opacity: 0.9; }


.ax-footer {
  margin-top: 80px; padding-top: 30px;
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px;
}
.ax-logo-lg { font-size: 40px; font-weight: 800; }
.ax-footer-text { font-weight: 700; font-size: 12px; max-width: 200px; text-transform: uppercase; }
.ax-btn-black {
  background: #1a1a1a; color: #fff; text-decoration: none; padding: 10px 16px; border-radius: 6px;
  font-weight: 600;
  font-size: 11px;
  display: inline-block;
}


.ax-sidebar-right {
  padding: 40px 20px;
  display: flex;
  justify-content: center;
}
.ax-rubricator {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 15px;
  align-content: start;
}
.rubric-item {
  position: relative; width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px;
  cursor: pointer;
}

.rubric-item .corner { border-color: #000; }


.rubric-item.current {
  background-color: var(--theme-color);
  color: #000000; border-radius: 6px;
}
.rubric-item.current .corner { opacity: 0; }


.ax-result-title {
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 40px;
}


.ax-res-item {
  margin-bottom: 50px;
}

.ax-res-header {

  font-size: 24px;
  font-weight: 800;
  margin-bottom: 20px;
  text-transform: uppercase;
}


.ax-res-desc, .ax-res-profs {
  position: relative;
  padding-left: 30px;
  margin-bottom: 15px;
  font-size: 1.2vw;
  line-height: 1.5;
  font-family: 'Akzidenzgroteskpro', sans-serif;
  font-weight: 400;
  color: black;
}
.ax-res-desc::before, .ax-res-profs::before {
  content: '➔';
  position: absolute;
  left: 0;
  top: 0;
  font-weight: bold;
  color: #4a9eff;
}


.ax-link-u {
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  color: inherit;
}
.ax-link-u:hover { color: var(--theme-color); }


.ax-res-btn {
  display: inline-block;
  padding: 12px 20px;
  margin-top: 10px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  color: #fff;
  transition: 0.2s;
  border: none;
  cursor: pointer;
}
.ax-res-btn:hover { opacity: 0.9; }

/* Цвета для кнопок (модификаторы) */
.btn-blue { background-color: #4a9eff; color: #FCFCFC; font-family: 'Akzidenzgroteskpro', sans-serif; font-weight: 800 }
.btn-green { background-color: #6cce96; color: #FCFCFC; font-family: 'Akzidenzgroteskpro', sans-serif; font-weight: 800 }
.btn-gray { background-color: #c4cdd5; color: #FCFCFC; font-family: 'Akzidenzgroteskpro', sans-serif; font-weight: 800 }


.ax-decor-wrapper {
  position: relative;
  height: 200px;
  margin-bottom: 20px;
}

.deco-obj {
  position: absolute;
  filter: drop-shadow(4px 4px 0 rgba(0,0,0,0.1));
}

.obj-cursor { top: 20px; left: 40px; transform: rotate(-15deg); width: 60px; }
.obj-hammer { top: 10px; right: 20px; width: 50px; transform: rotate(15deg); }
.obj-tube { bottom: 20px; left: 10px; width: 40px; transform: rotate(-10deg); }


.ax-widget-result {
  border: 2px dashed #000;
  padding: 20px;
  border-radius: 4px;
  text-align: center;
  position: relative;
}

.ax-widget-header-pill {
  background: #1a1a1a;
  color: #fff;
  padding: 8px 16px;
  border-radius: 20px;
  display: inline-block;
  font-weight: 700;
  font-size: 12px;
  margin-bottom: 15px;
  transform: rotate(-2deg);
}

.ax-widget-pill-white {
  background: #fff;
  border: 2px solid #000;
  padding: 6px 14px;
  border-radius: 20px;
  font-weight: 600;
  font-size: 12px;
  display: inline-block;
  box-shadow: 2px 2px 0 #000;
}
.rot-1 { transform: rotate(2deg); }
.rot-2 { transform: rotate(-1deg); }
.rot-3 { transform: rotate(3deg); }

.ax-arrow-down { font-weight: bold; font-size: 18px; margin: 5px 0; }

.ax-widget-btn-black {
  background: #1a1a1a;
  color: #fff;
  width: 100%;
  padding: 12px;
  margin-top: 20px;
  border: none;
  border-radius: 6px;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
}
.ax-content-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-start;
}

.main-wrapper {
  display: flex;
}

.sidebar {
  flex-shrink: 0;
  width: 250px;
  background: #FCFCFC;
}

.main-content {
  flex: 1;
  display: flex;
}

.ax-center-scroll {
  flex: 1;
  overflow-y: auto;
}

.ax-sidebar-right {
  flex-shrink: 0;
}
#sidebar-quiz{
  flex-shrink: 0;
  margin-top: -33vw;
}

.ax-widget-btn-black:hover { background: #000; }

.hidden {
  display: none !important;
}


/*новая главная*/

.pagination {
  display: flex;
  align-items: center;
  gap: 20px;
  z-index: 100;
  margin-top: 40vw;
}

.nav-arrow img{
  width: 1rem;
}

#prevBtn{
  transform: rotateY(-180deg);
}
.pages { display: flex; gap: 15px; align-items: center; }

.page-num {
  font-size: 18px; font-weight: 800;
  cursor: pointer;
  position: relative;
  padding: 5px 10px;
}

/* Стилизация активного элемента [ 1 ] */
.page-num.active::before,
.page-num.active::after {
  content: '';
  position: absolute;
  top: 0; width: 8px; height: 100%;
  border: 3px solid #000;
}
.page-num.active::before { left: 0; border-right: none; border-radius: 5px 0 0 5px; }
.page-num.active::after { right: 0; border-left: none; border-radius: 0 5px 5px 0; }


.slider-viewport {
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  z-index: 10;
}

.slider-track {
  display: flex;
  width: 400vw;
  height: 100%;
  transition: transform 0.8s cubic-bezier(0.77, 0, 0.175, 1);
}

.slide {
  position: relative;
  width: 100vw;
  height: 100vh;
  flex: 0 0 100vw;
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 62.5rem;
}

/* --- ПАГИНАЦИЯ --- */
.pagination {
  position: absolute;
  bottom: 2vw;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: max-content;
}


.nav-arrow {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  font-weight: bold;
  padding: 0 10px;
  display: inline-block;
}

.pages {
  display: flex;
  flex-direction: row;
  gap: 15px;
  align-items: center;
}


.slide-right-content {
  position: absolute;
  left: 10vw;
  width: 40vw;
  height: 60vh;
}

/* Общие анимации парения */
@keyframes float1 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.5vw); } }
@keyframes float2 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(2vw); } }
@keyframes float3 { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }

.float-1 { animation: float1 4s ease-in-out infinite; }
.float-2 { animation: float2 5s ease-in-out infinite; }
.float-3 { animation: float3 4.5s ease-in-out infinite; }


/* --- СТИЛИ 2 ЭКРАНА (Теги) --- */
.tag {
  position: absolute;
  font-family: 'Akzidenzgroteskpro', sans-serif;
  font-size: 2vw;
  font-weight: 800;
  padding: 0.8vw 1.5vw;
  border-radius: 1vw;
  cursor: pointer;
  transition: 0.3s;
}
.tag-orange:hover { transform: rotate(5deg) scale(1.3) !important;}
.tag-green:hover { transform: rotate(3deg) scale(1.3) !important;}
.tag-turquoise:hover { transform: rotate(10deg) scale(1.3) !important;}
.tag-blue:hover { transform: rotate(15deg) scale(1.3) !important;}
.tag-pink:hover { transform: rotate(5deg) scale(1.3) !important;}
.tag-bej:hover { transform: rotate(5deg) scale(1.3) !important;}
.tag-cyan:hover { transform: rotate(-5deg) scale(1.3) !important;}
.tag-yellow:hover { transform: rotate(-5deg) scale(1.3) !important;}
.tag-brown:hover { transform: rotate(-5deg) scale(1.3) !important;}
.tag-orange { color: #FF8C3F; top: 1%; left: 130%; width: 25vw; rotate: -5deg; }
.tag-cyan { color: #00d2d3; top: 15%; left: 110%; width: 25vw; rotate: 5deg; }
.tag-pink { color: #FF768D;  top: 26%; left: 120%; width: 35vw; rotate: -5deg;}
.tag-yellow { color: #FFCD55; top: 41%; left: 135%; rotate: 5deg; width: 20vw; }
.tag-bej { color: #F18E6D;  top: 50%; left: 150%; rotate: -5deg; width: 25vw;}
.tag-brown { color: #E6BB77; top: 65%; left: 120%; width: 35vw; rotate: 5deg; }
.tag-blue { color: #5BB2FF; top: 70%; left: 120%; rotate: -15deg; width: 20vw; }
.tag-turquoise { color: #80DDBF; top: 83%; left: 120%; width: 25vw; rotate: -10deg; }
.tag-green { color: #9CD75D; top: 87%; left: 165%; rotate: -3deg; width: 20vw; }

.hero-logo, .hero-text {
  transition: opacity 0.4s ease, visibility 0.4s;
}

.is-hidden {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none;
}

.dynamic-parallax-img {
  position: absolute;
  top: 30%;
  left: 15%;
  transform-origin: center;
  z-index: 10;
  pointer-events: none;
  transition: opacity 0.5s ease, transform 0.1s ease-out;
  width: 25vw;
}


.two-slide {
  perspective: 1000px;
}


/* --- СТИЛИ 3 ЭКРАНА  --- */
.glass-obj img{
  width: 15vw;
}

.glass-obj {
  transition: transform 0.3s ease, filter 0.3s ease;
  cursor: pointer;
}
.glass-obj:hover {
  transform: scale(1.05);
  filter: drop-shadow(0 0 15px rgba(150, 255, 150, 0.6));
}

.bag{
position: absolute;
  margin-left: 50vw;
}

.kepka{
  position: absolute;
  margin-right: -20vw;
  margin-top: -5vw;
}

.hat{
  position: absolute;
  margin-left: 30vw;
}

.three-hero-logo a {
  transition: opacity 0.3s ease;
  display: block;
}

.dynamic-title {
  position: absolute;
  top: 50%; /* Центрируем по вертикали относительно логотипа */
  left: -35vw;
  transform: translateY(-50%);
  font-family: 'Akzidenzgroteskpro', sans-serif;
  font-size: 2vw; /* Подберите нужный размер под макет */
  font-weight: 800;
  text-transform: uppercase;
  color: #000; /* Цвет текста */
  white-space: nowrap; /* Чтобы текст не переносился на новую строку */
  opacity: 0; /* Изначально текст скрыт */
  transition: opacity 0.3s ease;
  pointer-events: none; /* Чтобы текст не мешал кликать, если нужно */
}



/* --- СТИЛИ 4 ЭКРАНА (Колесо) --- */
.wheel-main-container {
  position: absolute;
  top: 0;
  right: 0;
  width: 50vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wheel-box {
  position: absolute;
  top: 50%;
  width: 75vw;
  left: 10%;
  transform: translateY(-50%);
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.wheel-spin-anim {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: center center;
  animation: rotateWheel 30s linear infinite;
}

@keyframes rotateWheel {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.square{
  bottom: 0;
  top: -11vw;
  right: -1vw;
  width: 40vw;
  height: 150vh;
  background-color: rgb(252, 252, 252);
  position: absolute;
  z-index: 50;
}

.random-btn {
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
  z-index: 100;
  background: #111; color: #fff;
  padding: 0.8vw 8vw;
  border-radius: 0.5vw;
  border: none; font-weight: 800; font-size: 1vw;
  cursor: pointer;
  white-space: nowrap;
  font-family: 'Akzidenzgroteskpro', sans-serif;
}

.random-btn:hover{
  background: #FF8C3F; color: #fff;
}

/*тренды*/
.arrow-long{
  margin-bottom: 2vw;
}


.arrow-long img{
  width: 77vw;
}


.trends2 img{
  width: 9vw !important;
}

.trends3 img{
  width: 8vw !important;
  margin-left: 3.5vw;
}

.zxx-core-viewport{
  margin-left: 3vw;
  width: 81%;
}

.card-header-trends{
  font-weight: 800;
  font-size: 1.2vw;
}

.card-img-placeholder-trends:hover{
  transform: scale(1.2);
}

.bl-tr img{
  margin-top: -2vw !important;
}

.med-tr img{
  width: 25vw;
  margin-top: -8vw !important;
  margin-left: 8vw !important;
}


.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--text-main);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.2rem;
  text-transform: uppercase;
  margin-bottom: 2rem;
}

.section {
  margin-bottom: 4rem;
}

.section__title {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 800;
  margin-bottom: 1.5rem;
  line-height: 1.1;
  letter-spacing: -0.5px;
}

.section p {
  font-size: 1rem;
  font-family: 'Akzidenzgroteskpro', sans-serif;
  margin-bottom: 1.2rem;
  font-weight: 400;
}

.custom-list {
  list-style: none;
  padding: 0;
}

.custom-list li {
  position: relative;
  font-family: 'Akzidenzgroteskpro', sans-serif;
  font-weight: 400;
  padding-left: 35px;
  margin-bottom: 15px;
  font-size: 1rem;
  color: #000000;
}


.custom-list-trends-blue li::before {
  content: '➔'; color: #5BB2FF;
  position: absolute;
  left: 0;
  top: 0;
  font-size: 18px;
}

.custom-list-trends-pink li::before {
  content: '➔'; color: #FF768D;
  position: absolute;
  left: 0;
  top: 0;
  font-size: 18px;
}

.custom-list-trends-turquosie li::before {
  content: '➔'; color: #80EAFF;
  position: absolute;
  left: 0;
  top: 0;
  font-size: 18px;
}


/* Изображения */
.image-container {
  margin-top: 2rem;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  background: #eef2f5;
}

.image-container img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  mix-blend-mode: multiply;
}

.content-wrapper{
  margin-left: 2vw;
  width: 60vw;
}

.cards-grid-test {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5vw;
  padding: 2rem 5vw;
  align-items: start;
}

.nexus-unit {
  position: relative;
  padding: 3rem 1.5rem;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  cursor: pointer;
}

/* Контейнер для уголков */
.vertex-shroud {
  position: absolute;
  inset: 0; /* Растягивает на всю площадь родителя */
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  pointer-events: none;
}

/* Появление при наведении */
.nexus-unit:hover .vertex-shroud {
  opacity: 1;
}

/* Общий стиль для каждого уголка */
.flux-node {
  position: absolute;
  width: 1.5rem;
  height: 1.5rem;
  border: 0.125rem solid #1a1a1a;
}

/* Позиционирование углов (используем логические свойства) */
.angle-alpha { top: 0; left: 0; border-right: none; border-bottom: none; }
.angle-beta  { top: 0; right: 0; border-left: none; border-bottom: none; }
.angle-gamma { bottom: 0; left: 0; border-right: none; border-top: none; }
.angle-delta { bottom: 0; right: 0; border-left: none; border-top: none; }

/* Внутренний контент */
.core-essence {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
}

/* Изображение */
.ethereal-artifact {
  width: 100%;
  height: 15rem;
  object-fit: contain;
  margin-bottom: 2rem;
  filter: drop-shadow(0 0.5rem 1rem rgba(0,0,0,0.05));
}

/* Заголовок с подчеркиванием */
.anchor-sigil {
  font-size: 1.2rem;
  font-weight: 900;
  line-height: 1.1;
  margin-bottom: 1.2rem;
  border-bottom: 0.25rem solid #1a1a1a;
  align-self: flex-start;
}

/* Ссылка-переход */
.portal-access {
  font-size: 0.95rem;
  font-weight: 700;
  color: #1a1a1a;
  text-decoration: none;
  margin-bottom: 1rem;
  transition: color 0.2s;
}

.portal-access:hover {
  color: #555;
}

/* Описание */
.data-stream {
  font-family: 'Akzidenzgroteskpro', sans-serif;
  font-weight: 500;
  font-size: 0.9rem;
  line-height: 1.5;
  color: #333;
  max-width: 95%;
}

.portal-access img{
  width: 0.8rem;
}

.search {
  position: relative;
  width: 100%;
  max-width: 78rem;
  margin: 0 auto;
}

.search-input {
  width: 100%;
  padding: 0.75rem 2.8125rem 0.75rem 1rem;
  border: none;
  border-radius: 0.625rem;
  background: #f1f1f1;
  font-size: 0.875rem;
  outline: none;
  transition: 0.2s;
}

.search-input::placeholder {
  color: #9e9e9e;
}

.search-input:focus {
  background: #e9e9e9;
}

.search-btn {
  position: absolute;
  top: 50%;
  right: 0.625rem;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 1rem;
  opacity: 0.6;
  transition: 0.2s;
}

.search-btn:hover {
  opacity: 1;
}

.no-results {
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  color: #999;
}

.search-btn img{
  width: 1.5rem;
}


/*спецпроект*/

.axis-interview-page {
  --ax-ink: #212121;
  --ax-paper:   #FFFFFF;
  --ax-rose:    #FF3264;
  --ax-fog:     #F5F5F5;
  --ax-mist:    #E6E6E6;
  --ax-smoke:   #AAAAAA;
  --ax-gold:    #F2C74E;
  --ax-teal:    #5FD8C4;
  --ax-orange:  #FF8A3D;
  --ax-ff-dis:  'Drukewidecyr', sans-serif;
  --ax-ff-body: 'Akzidenzgroteskpro', sans-serif;
  --ax-ease:    cubic-bezier(.22, 1, .36, 1);
  --ax-dur:     .38s;

  font-family: var(--ax-ff-body);
  background: #FCFCFC;
  color: var(--ax-ink);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}

.axis-interview-page *,
.axis-interview-page *::before,
.axis-interview-page *::after { box-sizing: inherit; }

.axis-interview-page img,
.axis-interview-page video,
.axis-interview-page svg { display: block; max-width: 100%; }

.axis-interview-page .site-crown {
  position: relative;
  display: flex;
  align-items: flex-start;
  padding: clamp(1.5rem,4vw,3rem) clamp(1.25rem,5vw,5rem) clamp(1rem,2vw,2rem);
  min-height: 60vw;
  overflow: hidden;
}

.axis-interview-page .crown-brand {
  display: flex;
  align-items: center;
  gap: clamp(.5rem,1.5vw,1.25rem);
  position: relative;
  z-index: 3;
  flex-wrap: wrap;
  animation: ax-slide-left .8s cubic-bezier(.22,1,.36,1) both;
}

.crown-brand {
  position: absolute;
  z-index: 100 !important;
  width: 100%;
  margin-top: 18vw;
  margin-left: 8vw;
}

.crown-brand span{
  margin-right: 10vw;
}
.brand-divider{
  width: 20vw;
}


.ax-bracket-spec {
  position: absolute;
  width: 1.1875rem;
  height: 3.4375rem;
  flex: none;
}

.axis-interview-page .ax-bracket-left-spec {
  top: 0;
  left: -2vw;
  right: auto;
  bottom: auto;
}

.axis-interview-page .ax-bracket-right-spec {
  bottom: 0;
  right: -2vw;
  top: auto;
  left: auto;
}

.axis-interview-page .brand-wordmark {
  font-family: var(--ax-ff-dis);
  font-size: clamp(2.8rem,8vw,6.5rem);
  letter-spacing: .02em;
  line-height: 1;
}

.axis-interview-page .brand-divider { display: flex; align-items: center; }


.axis-interview-page .brand-tagline {
  font-size: clamp(.5rem,1.1vw,.75rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  line-height: 1.5;
  max-width: 9rem;
}

.brand-tagline {
  font-family: 'Drukewidecyr', sans-serif !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  width: 100%;
  white-space: nowrap;

}

.site-crown {
  width: 100%;
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f5f5 0%, #ffffff 100%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(2rem, 5vw, 5rem);
  position: relative;
  overflow: hidden;
}

/* Brand Section - Left */
.crown-brand {
  flex: 0 1 clamp(20rem, 35vw, 45rem);
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 3vw, 2rem);
  position: relative;
  z-index: 10;
}

.brand-wordmark {
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 900;
  color: #000;
  letter-spacing: -0.02em;
  line-height: 1;
}

.brand-wordmark img {
  width: clamp(6rem, 15vw, 12rem);
  height: auto;
}

.brand-divider {
  width: clamp(0.15rem, 0.3vw, 0.25rem);
  height: clamp(3rem, 8vh, 6rem);
  background: #000;
  margin: 0.5rem 0;
  animation: ax-brand-entrance 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s both;
}

.brand-divider img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.brand-tagline {
  font-size: clamp(1rem, 2.5vw, 1.75rem);
  line-height: 1.3;
  font-weight: 500;
  color: #333;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  max-width: 25rem;
}

/* Text scatter animation - text enters from center outward */
.brand-tagline {
  position: relative;
}

.brand-tagline::before,
.brand-tagline::after {
  content: '';
  position: absolute;
  background: currentColor;
  animation: ax-scatter-fade 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s both;
}

/* Enhanced text animation with letter delay */
@keyframes ax-text-scatter-in {
  0% {
    opacity: 0;
    transform: translate(var(--tx), var(--ty)) scale(0.8);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
}

/* Rotation Cluster - Right */
.crown-cluster {
  flex: 0 1 clamp(20rem, 45vw, 55rem);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  height: clamp(20rem, 60vh, 70rem);
  user-select: none;

}

.rotation-viewport {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
}

.rotation-viewport.dragging {
  cursor: grabbing;
}

.rotation-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 20px 60px rgba(0, 0, 0, 0.1));
  transition: opacity 0.3s ease;
  will-change: opacity;
}

/* Entrance animation for 3D object */
@keyframes ax-cluster-pop {
  0% {
    opacity: 0;
    transform: scale(0.6) translateY(2rem);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.crown-cluster {
  animation: ax-cluster-pop 1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s both;
}

/* Brand entrance */
@keyframes ax-brand-entrance {
  0% {
    opacity: 0;
    width: 0;
  }
  100% {
    opacity: 1;
    width: clamp(0.15rem, 0.3vw, 0.25rem);
  }
}

/* Scatter fade effect */
@keyframes ax-scatter-fade {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0);
  }
}


.axis-interview-page .cluster-obj {
  position: absolute;
  border-radius: 50%;
  animation: ax-bobble 7s ease-in-out infinite;
}


/* ═══════════════════════════════════════════════
   MARQUEE
   ═══════════════════════════════════════════════ */
.axis-interview-page .ribbon-rail {
  overflow: hidden;
  padding: .3rem 0;
  user-select: none;
}

.axis-interview-page .ribbon-track {
  display: flex;
  width: max-content;
  animation: ax-marquee 20s linear infinite;
}

.axis-interview-page .ribbon-word {
  font-family: var(--ax-ff-dis);
  font-size: clamp(3.5rem,11vw,9rem);
  letter-spacing: .03em;
  white-space: nowrap;
  color: var(--ax-ink);
}

@keyframes ax-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-33.333%); }
}

.ribbon-word {
  animation: ribbonColorShift 8s steps(1, end) infinite;
}

@keyframes ribbonColorShift {
  0%   { color: #1a1a1a; }
  15%  { color: #be5f0a; }
  35%  { color: #FF768D; }
  55%  { color: #457b9d; }
  75% { color: #F29475}
}

/* ═══════════════════════════════════════════════
   SCATTER SECTION
   ═══════════════════════════════════════════════ */
.axis-interview-page .scatter-zone {
  position: relative;
  display: grid;
  align-items: center;
  gap: 2rem;
  padding: clamp(3rem,7vw,6rem) clamp(1.25rem,5vw,5rem);
  min-height: 50vw;
  overflow: hidden;
}

.scatter-back img{
  z-index: 1 !important;
  width: 90vw;
margin-top: -2vw;
}



.axis-interview-page .scatter-copy {
  position: absolute;
  flex-direction: row;
  gap: 2vw;
  width: 50vw;
  margin-left: 27vw;
  z-index: 100 !important;
}
.axis-interview-page .scatter-copy__text {
  width: 50vw;
}

.scatter-copy__text p + p{
  margin-top: 1.2em;
}
.axis-interview-page .scatter-copy p {
  font-size: clamp(.8rem,1.2vw,.9rem);
  line-height: 1.7;
  color: var(--ax-ink);
  /*max-width: 38rem;*/
}

.scatter-copy {
  position: absolute !important;
  gap: 10vw;
}

.scatter-copy p{
  margin-left: 0;
  width: auto;
  z-index: 100 !important;
}


  /* ═══════════════════════════════════════════════
     PROFESSION CLOUD
     ═══════════════════════════════════════════════ */
.axis-interview-page .field-cloud {
  padding: clamp(2rem,5vw,4rem) clamp(1.25rem,5vw,5rem) clamp(3rem,6vw,5rem);
}

.field-cloud__wrap {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  flex-wrap: wrap;
  gap: .5rem .7rem;
  justify-items: center;
  align-items: center;
  max-width: 100%;
  margin: 0 auto;
}

.fieldtag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  gap: .35rem;
  grid-column: span 2;
  font-family: 'Akzidenzgroteskpro', sans-serif;
  font-size: clamp(1.1rem,2.2vw,1.7rem);
  letter-spacing: .04em;
  line-height: 1;
  padding: .35rem .9rem;
  border-radius: 2rem;
  transition: background var(--ax-dur) var(--ax-ease),
  color      var(--ax-dur) var(--ax-ease),
  transform  var(--ax-dur) var(--ax-ease),
  box-shadow var(--ax-dur) var(--ax-ease);
  user-select: none;
}

.fieldtag--blue {
  background: var(--ax-paper);
  color: var(--ax-ink);
}

.fieldtag--blue:hover,
.fieldtag--blue[aria-pressed="true"] {
  background: #77D7EA;
  color: var(--ax-paper);
  transform: translateY(-.12rem) scale(1.04);
  box-shadow: 0 .4rem 1rem rgba(0,0,0,.18);
}

.fieldtag--mark {
  background: var(--ax-paper);
  color: var(--ax-ink);
}

.fieldtag--mark:hover,
.fieldtag--mark[aria-pressed="true"] {
  background: #FF8C3F;
  color: var(--ax-paper);
  transform: translateY(-.12rem) scale(1.04);
  box-shadow: 0 .4rem 1rem rgba(0,0,0,.18);
}

.fieldtag--edu {
  background: var(--ax-paper);
  color: var(--ax-ink);
}

.fieldtag--edu:hover,
.fieldtag--edu[aria-pressed="true"] {
  background: #F29475;
  color: var(--ax-paper);
  transform: translateY(-.12rem) scale(1.04);
  box-shadow: 0 .4rem 1rem rgba(0,0,0,.18);
}

.fieldtag--eco {
  background: var(--ax-paper);
  color: var(--ax-ink);
}

.fieldtag--eco:hover,
.fieldtag--eco[aria-pressed="true"] {
  background: #A1D965;
  color: var(--ax-paper);
  transform: translateY(-.12rem) scale(1.04);
  box-shadow: 0 .4rem 1rem rgba(0,0,0,.18);
}

.fieldtag--hum {
  background: var(--ax-paper);
  color: var(--ax-ink);
}

.fieldtag--hum:hover,
.fieldtag--hum[aria-pressed="true"] {
  background: #E7BF7E;
  color: var(--ax-paper);
  transform: translateY(-.12rem) scale(1.04);
  box-shadow: 0 .4rem 1rem rgba(0,0,0,.18);
}

.fieldtag--fin {
  background: var(--ax-paper);
  color: var(--ax-ink);
}

.fieldtag--fin:hover,
.fieldtag--fin[aria-pressed="true"] {
  background: #F9CB5C;
  color: var(--ax-paper);
  transform: translateY(-.12rem) scale(1.04);
  box-shadow: 0 .4rem 1rem rgba(0,0,0,.18);
}

#profCloud {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

#profCloud .prof-row {
  display: flex;
  flex-direction: row;
  gap: 2rem;
  align-items: center;
}

#profCloud .prof-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.prof-item button{
  border: none;
}

#profCloud .prof-icon {
  width: 6rem;
  flex-shrink: 0;
  object-fit: contain;
}

.axis-interview-page .fieldtag--rose {
  background: var(--ax-paper);
  color: var(--ax-ink);
}

.axis-interview-page .fieldtag--rose:hover,
.axis-interview-page .fieldtag--rose[aria-pressed="true"] {
  background: var(--ax-rose);
  color: var(--ax-paper);
  transform: translateY(-.12rem) scale(1.04);
  box-shadow: 0 .4rem 1rem rgba(255,50,100,.22);
}

.axis-interview-page .fieldtag:focus-visible {
  outline: 2px solid var(--ax-rose);
  outline-offset: 3px;
}

.axis-interview-page .field-cloud__hint {
  margin-top: 1.25rem;
  font-size: .8rem;
  color: var(--ax-smoke);
  letter-spacing: .02em;
  transition: opacity var(--ax-dur);
}

.axis-interview-page .field-cloud__hint.is-hidden {
  opacity: 0;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════
   INTERVIEW STAGE
   ═══════════════════════════════════════════════ */
.axis-interview-page .stage-zone {
  padding-top: 9rem;
  justify-content: center;
  margin-left: 20vw;
}

/* ── Сама карточка ───────────────────────────── */
.axis-interview-page .stage-card {
  --card-color: #FF3264;   /* перезаписывается из JS */
  position: relative;
  max-width: 50rem;
  border: 2px solid var(--card-color);
  border-radius: 1.25rem;
  background: #fff;
  overflow: visible;       /* floater вылезает сверху */
  padding-top: 5rem;
  opacity: 1;
  transform: translateY(0);
  transition: opacity .35s ease, transform .35s ease;
}

.axis-interview-page .stage-card.is-fading {
  opacity: 0;
  transform: translateY(1.2rem);
}

.axis-interview-page .stage-card__idle {
  padding: 3rem 2rem;
  text-align: center;
  color: #aaa;
  font-size: .95rem;
}

/* ── 3D картинка над карточкой ───────────────── */
.axis-interview-page .card-floater-img {
  position: absolute;
  top: -10rem;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(9rem, 20vw, 16rem);
  pointer-events: none;
  z-index: 2;
  animation: spec-float 5s ease-in-out infinite;
}

.axis-interview-page .card-floater-img img {
  width: 100%;
  height: auto;
  display: block;
}

@keyframes spec-float {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(-.7rem); }
}

/* ── Мета: профессия + имя + аватар ─────────── */
.axis-interview-page .card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5rem 1rem;
  gap: 1rem;
}

.axis-interview-page .card-meta__prof {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  letter-spacing: .04em;
  color: var(--card-color);
}

.axis-interview-page .card-meta__right {
  display: flex;
  align-items: center;
  gap: .8rem;
  flex-shrink: 0;
}

.axis-interview-page .card-meta__name {
  font-size: .9rem;
  font-weight: 500;
  color: #0D0D0D;
}

.axis-interview-page .card-meta__avatar {
  width: 3.8rem;
  height: 3.8rem;
  border-radius: 100%;
  justify-content: center;
  flex-shrink: 0;
}

/* ── Видеоплеер ──────────────────────────────── */
.axis-interview-page .card-video {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #d4d4d4;
  cursor: pointer;
  margin: 0 1.5rem 1.2rem;
  border-radius: .5rem;
  overflow: visible;
}

.axis-interview-page .card-video__bg {
  position: absolute;
  inset: 0;
  background: #d4d4d4;
  border-radius: .5rem;
}

/* Угловые скобки */
.axis-interview-page .vid-corner {
  position: absolute;
  width: 1.2rem;
  height: 1.2rem;
  border-color: var(--card-color);
  border-style: solid;
  pointer-events: none;
}
.axis-interview-page .vid-corner--tl { top: -.15rem; left: -.15rem;   border-width: 2px 0 0 2px; border-radius: 2px 0 0 0; }
.axis-interview-page .vid-corner--tr { top: -.15rem; right: -.15rem;  border-width: 2px 2px 0 0; border-radius: 0 2px 0 0; }
.axis-interview-page .vid-corner--bl { bottom: -.15rem; left: -.15rem;  border-width: 0 0 2px 2px; border-radius: 0 0 0 2px; }
.axis-interview-page .vid-corner--br { bottom: -.15rem; right: -.15rem; border-width: 0 2px 2px 0; border-radius: 0 0 2px 0; }

.axis-interview-page .card-video__btn {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.axis-interview-page .video-play-ring {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .25s;
}
.axis-interview-page .video-play-ring::after {
  content: '';
  border-style: solid;
  border-color: transparent transparent transparent var(--card-color);
  border-width: .65rem 0 .65rem 1rem;
  margin-left: .2rem;
}
.axis-interview-page .card-video:hover .video-play-ring {
  transform: scale(1.1);
}

.axis-interview-page .card-video__el {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: .5rem;
  display: none;
}

.axis-interview-page .card-video iframe,
.axis-interview-page .card-video video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  border: none; /* Убираем стандартную рамку iframe */
  border-radius: .5rem; /* Чтобы углы видео совпадали с углами серой карточки */
  object-fit: cover; /* На всякий случай для тега <video> */
}

.axis-interview-page .card-video.is-playing .card-video__bg,
.axis-interview-page .card-video.is-playing .card-video__btn { display: none; }
.axis-interview-page .card-video.is-playing .card-video__el  { display: block; }

/* ── Аудиоплеер ──────────────────────────────── */
.axis-interview-page .card-audio {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .9rem 1.5rem;
  border-bottom: 1px solid #e6e6e6;
}

.axis-interview-page .aud-btn {
  width: 2.4rem;
  height: 2.4rem;
  border: 1.5px solid var(--card-color);
  border-radius: .5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  background: none;
  transition: background .25s;
}
.axis-interview-page .aud-btn svg {
  width: 1rem;
  height: 1rem;
  color: var(--card-color);
  transition: color .25s;
}
.axis-interview-page .aud-btn:hover,
.axis-interview-page .aud-btn.is-active {
  background: var(--card-color);
}
.axis-interview-page .aud-btn:hover svg,
.axis-interview-page .aud-btn.is-active svg {
  color: #fff;
}

.axis-interview-page .aud-wave {
  flex: 1;
  height: 2rem;
  display: flex;
  align-items: center;
  gap: 2px;
  overflow: hidden;
  cursor: pointer;
}

.axis-interview-page .wave-slat {
  width: 2px;
  background: #0D0D0D;
  border-radius: 1px;
  flex-shrink: 0;
  transition: background .15s;
}
.axis-interview-page .wave-slat.done {
  background: var(--card-color);
}

.axis-interview-page .aud-clock {
  font-size: .78rem;
  font-variant-numeric: tabular-nums;
  color: #aaa;
  min-width: 2.8rem;
  text-align: right;
  flex-shrink: 0;
}

/* ── Текстовый флаг ──────────────────────────── */
.axis-interview-page .card-text-flag {
  padding: .8rem 1.5rem;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--card-color);
  border-bottom: 1px solid var(--card-color);
}

/* ── Q&A тело ────────────────────────────────── */
.axis-interview-page .card-body {
  padding: 1.5rem 1.5rem 2rem;
}

.axis-interview-page .qa-block + .qa-block {
  margin-top: 1.4rem;
}

.axis-interview-page .qa-q {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: .4rem;
}

.axis-interview-page .qa-a {
  font-size: .9rem;
  line-height: 1.7;
  color: #333;
}

/* ── CTA кнопка ──────────────────────────────── */
.axis-interview-page .card-body__foot {
  margin-top: 1.8rem;
  display: flex;
  justify-content: flex-end;
}

.axis-interview-page .cta-pill {
  background: var(--card-color);
  color: #fff;
 font-family: "Drukewidecyr", sans-serif;
  font-size: 1.1rem;
  letter-spacing: .06em;
  padding: .65rem 1.6rem;
  border-radius: 999px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  transition: filter .25s;
}
.axis-interview-page .cta-pill:hover {
  filter: brightness(.85);
}


.content-footer-main-spec{
  width: 100%;
  padding: 2vw 5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer-logo-spec img{
  width: 8vw;
}

.footer-line-spec {
  width: 1vw;
  flex-grow: 1;
  height: 0.2vw;
  background: #212121;
}

.footer-line-main-spec img{
  width: 8vw;
}

.footer-slogan-main-spec {
  font-size: 1vw;
  color: #212121;
  width: auto;
  font-weight: 800;
  text-transform: uppercase;
  text-wrap: nowrap;
  margin-left: 2vw;
}

.footer-slogan-spec {
  font-size: 1vw;
  color: #212121;
  font-weight: 800;
  text-transform: uppercase;
  margin-right: 1vw;
}


.footer-buttons-main-spec{
  display: inline-flex;
  margin-top: -9vw;
  gap: 10px;
}

.btn-black-spec {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  font-family: 'Akzidenzgroteskpro', sans-serif;
  background: #212121;
  color: #FCFCFC;
  width: auto;
  padding: 1vw 2vw;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  margin-top: 9vw;
  border-radius: 10px;
  border: none;
  text-wrap: nowrap !important;
  cursor: pointer;
  width: fit-content;
  text-decoration: none;
}

.btn-black-spec img{
  align-items: center;
  width: 1rem;
  /*margin-left: 0.1rem;*/
  /*margin-top: 0.5vw;*/
}



/* Brand Section - Left */
.spec-hero-page {
  width: 100%;
  margin-bottom: 5vw;
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f5f5 0%, #ffffff 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(2rem, 5vw, 5rem);
  position: relative;
  overflow: hidden;
}

/* Brand Section - Left (Absolute positioning) */
.spec-hero-page .spec-brand {
  position: absolute;
  display: flex;
  z-index: 100 !important;
  align-items: center;
  justify-content: center;
  gap: 8vw;

}

.spec-hero-page .spec-brand-wordmark {
}

.spec-hero-page .spec-brand-wordmark img {
  width: 20vw;
  height: auto;
  display: block;
}

.spec-hero-page .spec-brand-divider {
}

.spec-hero-page .spec-brand-divider img {
  width: 10vw;
  object-fit: cover;
}

.spec-hero-page .spec-brand-tagline {
  font-size: clamp(0.85rem, 1.8vw, 1.4rem);
  line-height: 1.2;
  font-weight: 500;
  color: #333;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.015em;
  max-width: 20rem;
  word-spacing: 0.2em;
  animation: spec-text-entrance 0.6s ease-out 0.3s both;
}

@keyframes spec-text-entrance {
  0% {
    opacity: 0;
    transform: translateY(0.5rem);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes spec-brand-entrance {
  0% {
    opacity: 0;
    width: 0;
  }
  100% {
    opacity: 1;
    width: clamp(0.15rem, 0.3vw, 0.25rem);
  }
}

/* Rotation Cluster - Center 70% */
.spec-hero-page .spec-rotation-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(30rem, 70vw, 85rem);
  height: clamp(30rem, 70vh, 90rem);
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  z-index: 5;
}

.spec-hero-page .spec-rotation-viewport {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
}

/* Hovering state */
.spec-hero-page .spec-rotation-viewport.hovering {
  cursor: grab;
}

.spec-hero-page .spec-rotation-viewport.hovering.dragging {
  cursor: grabbing;
}

.spec-hero-page .spec-rotation-image {
  width: 56vw;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 20px 60px rgba(0, 0, 0, 0.1));
  transition: opacity 0.08s ease;
  will-change: opacity;
}

/* Entrance animation for 3D object */
@keyframes spec-cluster-pop {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

.spec-hero-page .spec-rotation-container {
  animation: spec-cluster-pop 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s both;
}

.spec-page {
  --ax-heartbeat-duration: 1.5s;
}

@keyframes ax-heartbeat-ultra {
  0% {
    transform: scale(1) translateY(0);
    opacity: 1;
    filter: drop-shadow(0 0 0 rgba(255, 107, 71, 0));
  }
  10% {
    transform: scale(1.12) translateY(-0.4rem);
    opacity: 0.85;
    filter: drop-shadow(0 0 1.5rem rgba(255, 107, 71, 0.6));
  }
  15% {
    transform: scale(1) translateY(0);
    opacity: 1;
    filter: drop-shadow(0 0 0 rgba(255, 107, 71, 0));
  }
  25% {
    transform: scale(1.12) translateY(-0.4rem);
    opacity: 0.85;
    filter: drop-shadow(0 0 1.5rem rgba(255, 107, 71, 0.6));
  }
  30% {
    transform: scale(1) translateY(0);
    opacity: 1;
    filter: drop-shadow(0 0 0 rgba(255, 107, 71, 0));
  }
  100% {
    transform: scale(1) translateY(0);
    opacity: 1;
    filter: drop-shadow(0 0 0 rgba(255, 107, 71, 0));
  }
}

.spec-page .spec-rotation-container.heartbeat-ultra {
  animation: ax-heartbeat-ultra var(--ax-heartbeat-duration) ease-in-out infinite;
}
@font-face {
  font-family: 'Akzidenzgroteskpro';
  src: url(fonts/cb7b4b1e0f58e2a6b10e.otf),
    url(fonts/cb7b4b1e0f58e2a6b10e.otf);
  font-weight: 400;
}

@font-face {
  font-family: 'Drukewidecyr';
  src: url(fonts/22b0b92cd6b38eb9dbbd.otf),
    url(fonts/22b0b92cd6b38eb9dbbd.otf);
  font-weight: 600;
}
:root {
    --font-main: 'Akzidenzgroteskpro', sans-serif;
}


@media screen and (max-width: 1024px) {

    .main-wrapper {
        display: block;
    }

    .sidebar {
        display: none;
    }

    .main-content {
        display: flex;
        flex-direction: column;
    }

    .ax-center-scroll {
        height: auto;
        overflow-y: visible;
        padding: 40px;
        margin-left: 0;
    }

    .content {
        padding: 40px;
    }

    .content-wrapper,
    .zxx-core-viewport {
        margin-left: 0;
        width: 100%;
    }

    /* ── Мобильный хедер ── */
    .mobile-header {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        padding: 20px 50px;
        background: #FCFCFC;
        position: sticky;
        top: 0;
        z-index: 200;
        border-bottom: 1px solid #eee;
    }

    .mob-logo-icon img {
        width: 14%;
        height: auto;
    }

    .mob-burger {
        font-size: 3vw;
        cursor: pointer;
        line-height: 1;
    }

    /* ── Футер: основной скрыть, мобильный показать ── */
    .content-footer-main,
    .content-footer-main-spec,
    .content-footer {
        display: none !important;
    }

    .mobile-footer {
        display: block !important;
        width: 100%;
        background-color: #FCFCFC;
        padding: 32px 40px 48px;
        border-top: 1.5px solid #212121;
        margin-top: 48px;
    }

    .mobile-footer-content {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
    }

    .mobile-footer .mob-logo-icon img {
        width: 12%;
        height: auto;
        display: block;
    }

    .footer-line-mob {
        flex-grow: 1;
        height: 2px;
        background-color: #212121;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }

    .footer-line-mob img {
        width: 4%;
        height: auto;
        position: absolute;
        right: -2px;
    }

    .footer-slogan-mob {
        font-family: 'Drukewidecyr', sans-serif;
        font-size: 1vw;
        font-weight: 800;
        line-height: 1.2;
        text-transform: uppercase;
        white-space: nowrap;
        color: #212121;
        letter-spacing: 0.02em;
    }

    /* ── Заголовок [ Название ] ── */
    .ax-hero-title {
        display: flex;
        align-items: center;
        gap: 13px;
        margin-bottom: 32px;
    }

    .ax-bracket {
        width: 2%;
        height: auto;
    }

    .ax-title-text {
        font-size: 2.5vw;
        font-weight: 800;
        text-transform: uppercase;
    }

    /* ── Статьи: хедер и навигация ── */
    .ax-header {
        margin-bottom: 32px;
    }

    .ax-back-link {
        font-size: 1.7vw;
        font-weight: 700;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .ax-icon-arrow img {
        width: 2%;
        height: auto;
    }

    /* ── Правая колонка (виджет заметок) ── */
    .ax-sidebar-right {
        display: none;
    }

    /* ── Текст и списки в статьях ── */
    .ax-intro-text,
    .ax-text {
        font-size: 1.6vw;
        line-height: 1.6;
        margin-bottom: 32px;
    }

    .ax-section-title {
        font-size: 2vw;
        font-weight: 800;
        margin-bottom: 19px;
    }

    .ax-content-wrapper {
        max-width: 100%;
        padding: 0;
    }

    .ax-grid-2-col {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .ax-list-checked,
    .ax-list-checked-orange,
    .ax-list-checked-rose,
    .ax-list-checked-turquoise,
    .ax-list-checked-yellow,
    .ax-list-checked-trew,
    .ax-list-checked-green,
    .ax-list-checked-bej,
    .ax-list-checked-brown,
    .ax-list-checked-ser {
        width: 100%;
    }

    .ax-list-checked li,
    .ax-list-checked-orange li,
    .ax-list-checked-rose li,
    .ax-list-checked-turquoise li,
    .ax-list-checked-yellow li,
    .ax-list-checked-trew li,
    .ax-list-checked-green li,
    .ax-list-checked-bej li,
    .ax-list-checked-brown li,
    .ax-list-checked-ser li {
        position: relative;
        padding-left: 40px;
        margin-bottom: 16px;
        font-size: 1.6vw;
        line-height: 1.5;
        color: #212121;
        white-space: normal;
    }

    .it-li li {
        width: 100% !important;
        font-size: 1.6vw !important;
        white-space: normal !important;
    }

    .ax-list-checked li::before { content: '→'; position: absolute; left: 0; color: #5BB2FF; font-size: 2vw; font-weight: 900; }
    .ax-list-checked-yellow li::before { content: '→'; position: absolute; left: 0; color: #FFCD55; font-size: 2vw; font-weight: 900; }
    .ax-list-checked-orange li::before { content: '→'; position: absolute; left: 0; color: #FF8C3F; font-size: 2vw; font-weight: 900; }
    .ax-list-checked-turquoise li::before { content: '→'; position: absolute; left: 0; color: #80EAFF; font-size: 2vw; font-weight: 900; }
    .ax-list-checked-rose li::before { content: '→'; position: absolute; left: 0; color: #FF768D; font-size: 2vw; font-weight: 900; }
    .ax-list-checked-green li::before { content: '→'; position: absolute; left: 0; color: #9CD75D; font-size: 2vw; font-weight: 900; }
    .ax-list-checked-trew li::before { content: '→'; position: absolute; left: 0; color: #80DDBF; font-size: 2vw; font-weight: 900; }
    .ax-list-checked-bej li::before { content: '→'; position: absolute; left: 0; color: #E6BB77; font-size: 2vw; font-weight: 900; }
    .ax-list-checked-brown li::before { content: '→'; position: absolute; left: 0; color: #F18E6D; font-size: 2vw; font-weight: 900; }
    .ax-list-checked-ser li::before { content: '→'; position: absolute; left: 0; color: #C2D3E5; font-size: 2vw; font-weight: 900; }

    /* ── Каталог ── */
    .catalog-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        margin-top: 32px;
    }

    .cat-card {
        height: 100px;
        width: 100%;
        border-radius: 16px;
        padding: 0 32px;
    }

    .card-title {
        font-size: 1.9vw;
        font-weight: 800;
    }

    .card-icon img {
        width: 30%;
        height: auto;
    }

    .filter-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 24px;
    }

    .btn-filter {
        width: auto;
        font-size: 1.2vw;
        padding: 8px 12px;
        border-radius: 8px;
    }

    .professions-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 16px;
        max-width: 100% !important;
        margin: 24px 0 !important;
    }

    .card-filter {
        width: 100% !important;
        height: auto !important;
        min-height: 160px;
        padding: 12px;
    }

    .card-filter img {
        width: 50% !important;
        margin-left: auto !important;
        margin-top: 16px !important;
    }


    /* ── О нас ── */
    .about-layout {
        flex-direction: column;
        gap: 32px;
    }

    .about-text {
        max-width: 100%;
    }

    .about-visuals {
        display: flex;
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
        gap: 32px;
    }

    .about-img {
        width: 25%;
        height: auto;
    }

    /* ── Главная страница ── */
    .hero-top-nav,
    .slider-track,
    .pagination,
    .slider-viewport,
    .hero-section {
        display: none;
    }

    .main-mob {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        margin-top: 20px !important;
        z-index: 100;
    }

    .top-content-grid {
        display: flex;
        flex-direction: column;
        gap: 32px;
    }

    .categories-list {
        border: 1px solid #212121;
        border-radius: 16px;
        padding: 0;
        margin-bottom: 32px;
    }

    .cat-item {
        border-bottom: 1px solid #e0e0e0;
        padding: 14px 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .cat-item:last-child {
        border-bottom: none;
    }

    .cat-item a {
        font-size: 1.6vw;
        font-weight: 900;
        text-transform: uppercase;
        text-decoration: none;
        color: #212121;
    }

    .cat-item::after {
        content: '→';
        font-weight: bold;
    }

    .promo-banner {
        padding: 24px;
        border-radius: 16px;
        display: flex;
        flex-direction: column;
        position: relative;
        overflow: hidden;
    }

    .banner-content {
        width: 100%;
        position: relative;
        z-index: 2;
    }

    .banner-content h2 {
        font-size: 2.8vw;
        line-height: 1.1;
        margin-bottom: 16px;
    }

    .steps p {
        width: 100% !important;
        font-size: 1.4vw;
        margin: 5px 0;
    }

    .banner-btn {
        font-family: 'Akzidenzgroteskpro', sans-serif;
        font-size: 1.2vw;
        margin-top: 16px;
        padding: 10px 16px;
    }

    .btn-read {
        font-family: 'Akzidenzgroteskpro', sans-serif;
        font-size: 1.2vw;
        padding: 8px 16px;
    }

    /* ── Горизонтальный скролл — карточки главной ── */
    .articles-section {
        margin-top: 40px;
        width: 100%;
        overflow: hidden;
    }

    .cards-grid {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 16px;
        padding: 8px 0 32px;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .cards-grid::-webkit-scrollbar {
        display: none;
    }

    .card {
        flex: 0 0 820px;
        max-width: 820px;
        height: auto;
        min-height: 300px;
        scroll-snap-align: start;
    }

    .card-header span:first-child {
        font-size: 2vw;
        font-weight: 800;
        line-height: 1.1;
        display: block;
        margin-bottom: 8px;
    }

    .card-header-trends {
        font-size: 1.6vw;
        font-weight: 800;
        margin-bottom: 8px;
    }

    /* ── Горизонтальный скролл — тренды главной ── */
    .trends-grid {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        gap: 16px;
        padding: 8px 0 32px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .trends-grid::-webkit-scrollbar {
        display: none;
    }

    .trend-card {
        flex: 0 0 768px;
        border-radius: 16px;
        padding: 24px;
        scroll-snap-align: start;
        min-height: 256px;
        display: flex;
        flex-direction: column;
    }

    .trend-card a {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
        text-decoration: none;
        color: #212121;
    }

    .trend-card h3 {
        font-size: 1.9vw;
        font-weight: 900;
        line-height: 1.2;
        margin: 0;
    }

    .trend-img {
        width: 25% !important;
        height: auto !important;
        align-self: flex-end;
        margin-top: 16px;
        object-fit: contain;
    }

    /* ── Тренды (search.html) — мелкая сетка ── */
    .trend-grid-two {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        width: 100% !important;
        gap: 16px !important;
        margin-bottom: 32px !important;
    }

    .trend-card-two {
        width: 100% !important;
        height: auto !important;
        min-height: 192px;
        padding: 16px !important;
    }

    .trend-card-two h3 {
        font-size: 1.5vw;
        font-weight: 800;
        line-height: 1.3;
    }

    .trend-img-two {
        width: 50% !important;
        margin: 12px auto 0 !important;
    }

    .trends2 img,
    .trends3 img {
        width: 50% !important;
        margin: 12px auto 0 !important;
    }

    .arrow-long {
        overflow: hidden;
        margin-bottom: 24px;
    }

    .arrow-long img {
        width: 100% !important;
    }

    /* ── Статья тренда (search1.html) ── */
    .section {
        margin-bottom: 48px;
    }

    .section__title {
        font-size: 2vw;
        font-weight: 800;
        margin-bottom: 19px;
        line-height: 1.2;
    }

    .section p {
        font-size: 1.6vw;
        line-height: 1.6;
        margin-bottom: 16px;
    }

    .custom-list li {
        font-size: 1.6vw;
        padding-left: 40px;
        margin-bottom: 12px;
    }

    .image-container {
        margin-top: 24px;
        border-radius: 8px;
    }

    /* ── Тесты (test.html) ── */
    .cards-grid-test {
        display: flex;
        flex-direction: column;
        gap: 48px;
        padding: 0;
    }

    .nexus-unit {
        width: 100%;
        max-width: 800px;
        margin: 0 auto;
        padding: 32px 24px;
    }

    .ethereal-artifact {
        width: 100%;
        max-width: 36%;
        height: auto;
        display: block;
        margin: 0 auto 24px;
    }

    .anchor-sigil {
        font-size: 2vw;
        font-weight: 900;
        line-height: 1.1;
        margin-bottom: 16px;
        border-bottom: 0.32px solid #212121;
        display: inline-block;
    }

    .portal-access {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 1.6vw;
        font-weight: 700;
        text-decoration: none;
        color: #212121;
        margin-bottom: 16px;
    }

    .portal-access img {
        width: 2%;
        height: auto;
    }

    .data-stream {
        font-size: 1.6vw;
        line-height: 1.5;
        margin-bottom: 24px;
    }

    .btn-cta {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        background: #212121;
        color: #fff;
        text-decoration: none;
        padding: 16px 24px;
        border-radius: 10px;
        font-size: 1.6vw;
        font-weight: 800;
        transition: opacity 0.2s;
    }

    .btn-cta:hover {
        opacity: 0.85;
    }

    /* ── Квиз (test1.html) ── */
    .ax-question-text {
        font-size: 1.9vw;
        font-weight: 700;
        margin-bottom: 24px;
    }

    .ax-option-text {
        font-size: 1.6vw;
        line-height: 1.4;
    }

    .ax-nav-btns {
        display: flex;
        gap: 12px;
        margin-top: 24px;
    }

    .ax-btn {
        padding: 12px 24px;
        font-size: 1.4vw;
    }

    .ax-rubricator {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 8px;
    }

    .ax-title-wrap {
        font-size: 1.6vw;
        margin-bottom: 24px;
    }

    .ax-res-header {
        font-size: 1.7vw;
        font-weight: 800;
        margin-bottom: 16px;
    }

    .ax-res-desc,
    .ax-res-profs {
        font-size: 1.6vw;
        padding-left: 32px;
        line-height: 1.5;
    }

    .ax-res-btn {
        font-size: 1.3vw;
        padding: 10px 16px;
    }

    /* ── Спецпроект (spec.html) ── */
    .spec-hero-page {
        min-height: auto;
        padding: 48px 32px;
        margin-bottom: 32px;
    }

    .spec-hero-page .spec-brand {
        position: relative;
        gap: 32px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .spec-hero-page .spec-brand-wordmark img {
        width: 18%;
        height: auto;
    }

    .spec-hero-page .spec-brand-divider img {
        width: 2%;
        height: auto;
    }

    .spec-hero-page .spec-brand-tagline {
        font-size: 1.4vw;
    }

    .spec-hero-page .spec-rotation-image {
        width: 70%;
        height: auto;
    }

    .axis-interview-page .ribbon-word {
        font-size: 7vw;
    }

    .axis-interview-page .scatter-zone {
        padding: 32px;
        min-height: auto;
    }

    .scatter-back img {
        width: 100%;
    }

    .axis-interview-page .scatter-copy {
        position: relative !important;
        width: 563px;
        margin-left: 205px;
    }

    .axis-interview-page .scatter-copy__text {
        width: 100%;
    }

    .axis-interview-page .scatter-copy p {
        font-size: 1.6vw;
        line-height: 1.6;
    }

    .axis-interview-page .field-cloud {
        padding: 32px;
    }

    #profCloud {
        gap: 16px;
    }

    #profCloud .prof-row {
        flex-wrap: wrap;
        gap: 12px;
    }

    #profCloud .prof-icon {
        width: 6%;
        height: auto;
    }

    .fieldtag {
        font-size: 2vw !important;
        padding: 6px 14px !important;
    }

    .axis-interview-page .stage-zone {
        padding-top: 64px;
        margin-left: 0;
    }

    .axis-interview-page .stage-card {
        max-width: 100%;
    }

    /* ── Стайлгайд ── */
    .sg-wrapper {
        grid-template-columns: 180px 1fr !important;
    }

    .sg-sidebar-right {
        display: none;
    }

    .sg-content {
        padding: 32px 24px 64px;
    }

    .sg-h2 {
        font-size: 2.2vw;
        margin-bottom: 19px;
    }

    .sg-cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    .sg-typo-row,
    .sg-grid-row,
    .sg-logo-row {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .sg-nav-link {
        font-size: 1.1vw;
    }

    /* ── Collab ── */
    .collab-page .hero-illustration-skill img {
        width: 38%;
        height: auto;
        margin-left: -3%;
    }

    .collab-page .quiz-header-block-skill h1 {
        width: 90%;
        font-size: 4.5vw;
        margin-left: 5%;
        margin-bottom: 48px;
    }

    .collab-page .skill-icon-holder img {
        width: 12%;
        height: auto;
        margin-left: 5%;
    }

    .collab-page .section-skill {
        padding: 64px 0;
    }

}



@media screen and (max-width: 480px) {


    .content {
        padding: 24px 19px;
    }

    .ax-center-scroll {
        padding: 19px;
    }

    body {
        overflow-x: hidden;
    }

    /* ── Хедер ── */
    .mob-logo-icon img {
        width: 20%;
        height: auto;
    }

    .mob-burger {
        font-size: 5.3vw;
    }

    /* ── Заголовок [ Название ] ── */
    .ax-hero-title {
        gap: 8px;
        margin-bottom: 24px;
    }

    .ax-bracket {
        width: 2.5%;
        height: auto;
    }

    .ax-title-text {
        font-size: 3.7vw;
        font-weight: 900;
        white-space: nowrap;
    }

    /* ── Каталог ── */
    .catalog-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .cat-card {
        height: auto;
        min-height: 72px;
        padding: 0 16px;
        border-radius: 13px;
    }

    .card-title {
        font-size: 3.3vw;
    }

    .card-icon {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 35%;
        pointer-events: none;
        z-index: 1;
    }

    .card-icon img {
        width: 100%;
        height: auto;
        object-fit: contain;
    }

    .filter-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        padding-bottom: 8px;
    }

    .btn-filter {
        font-size: 2.2vw;
        padding: 6px 10px;
        white-space: nowrap;
        border-radius: 8px;
        width: auto;
        border: 1px solid #ddd;
        background: #fff;
    }

    .professions-grid {
        display: grid;
        grid-template-columns: 1fr 1fr !important;
        gap: 12px;
        margin: 16px 0 !important;
        max-width: 100% !important;
    }

    .card-filter {
        width: 100% !important;
        height: auto !important;
        min-height: 112px;
        padding: 12px;
        border-radius: 13px;
    }

    .card-filter h3 {
        font-size: 2.5vw;
        font-weight: 800;
    }

    .card-filter img {
        width: 50% !important;
        align-self: flex-end;
        margin-top: 12px !important;
        margin-left: 0 !important;
    }

    /* ── О нас ── */
    .text-section {
        margin-bottom: 32px;
    }

    .text-section h2 {
        font-size: 4vw;
        font-weight: 800;
        margin-bottom: 13px;
    }

    .text-section p {
        font-size: 3.2vw;
        line-height: 1.5;
    }

    .who-list li {
        position: relative;
        padding-left: 35px;
        margin-bottom: 16px;
        font-size: 3.2vw;
        line-height: 1.4;
    }

    .who-list li::before {
        content: "➔";
        position: absolute;
        left: 0;
        top: 2px;
        font-size: 3.3vw;
        font-weight: bold;
    }

    .arrow-blue::before  { color: #4094ff; }
    .arrow-orange::before { color: #ff8c40; }
    .arrow-green::before  { color: #a2d94c; }

    .about-visuals {
        display: none;
    }

    .styleguide-link {
        margin-top: 24px;
        border-top: 1px solid #eee;
        padding-top: 19px;
    }

    /* ── Главная ── */
    .banner-content h2 {
        font-size: 4.7vw;
    }

    .card {
        flex: 0 0 408px;
        max-width: 408px;
    }

    /* ── Тренды (search.html) — сброс негативных отступов из main.css ── */
    .bl-tr img {
        margin-top: 0 !important;
    }

    .med-tr img {
        margin-top: 0 !important;
        margin-left: 0 !important;
    }

    .card-img-placeholder-trends img {
        position: relative !important;
        margin: 0 !important;
    }

    .trend-grid-two {
        grid-template-columns: 1fr !important;
    }

    .trend-card-two {
        min-height: auto !important;
    }

    .trend-card-two h3 {
        font-size: 3.3vw;
    }

    .trend-img-two {
        width: 20% !important;
        margin: 8px 0 0 auto !important;
    }

    .trends2 img,
    .trends3 img {
        width: 20% !important;
    }

    /* ── Статья тренда (search1.html) ── */
    .section {
        margin-bottom: 32px;
    }

    .section__title {
        font-size: 3.7vw;
        margin-bottom: 13px;
    }

    .section p {
        font-size: 3vw;
    }

    .custom-list li {
        font-size: 3vw;
        padding-left: 32px;
        margin-bottom: 10px;
    }

    /* ── Статьи профессий ── */
    .ax-section-title {
        font-size: 3.7vw;
    }

    .ax-intro-text,
    .ax-text {
        font-size: 3vw;
    }

    .ax-list-checked li,
    .ax-list-checked-orange li,
    .ax-list-checked-rose li,
    .ax-list-checked-turquoise li,
    .ax-list-checked-yellow li,
    .ax-list-checked-trew li,
    .ax-list-checked-green li,
    .ax-list-checked-bej li,
    .ax-list-checked-brown li,
    .ax-list-checked-ser li {
        font-size: 3vw;
        padding-left: 32px;
        margin-bottom: 10px;
        white-space: normal;
    }

    .it-li li {
        width: 100% !important;
        font-size: 3vw !important;
    }

    /* ── Тесты (test.html) ── */
    .cards-grid-test {
        gap: 40px;
    }

    .nexus-unit {
        padding: 24px 16px;
    }

    .ethereal-artifact {
        max-width: 44%;
    }

    .anchor-sigil {
        font-size: 3.7vw;
    }

    .data-stream {
        font-size: 3vw;
    }

    /* ── Квиз (test1.html) ── */
    .ax-question-text {
        font-size: 3.3vw;
        margin-bottom: 16px;
    }

    .ax-option-text {
        font-size: 3vw;
    }

    .ax-btn {
        padding: 10px 16px;
        font-size: 2.5vw;
    }

    .ax-rubricator {
        gap: 6px;
    }

    .rubric-item {
        width: 29px;
        height: 29px;
        font-size: 2.3vw;
    }

    .ax-res-header {
        font-size: 3.3vw;
    }

    .ax-res-desc,
    .ax-res-profs {
        font-size: 3vw;
    }

    /* ── Спецпроект (spec.html) ── */
    .spec-hero-page {
        padding: 32px 16px;
    }

    .spec-hero-page .spec-brand-wordmark img {
        width: 26%;
        height: auto;
    }

    .spec-hero-page .spec-rotation-image {
        width: 88%;
        height: auto;
    }

    .axis-interview-page .ribbon-word {
        font-size: 11vw;
    }

    .scatter-back img {
        display: none;
    }

    .axis-interview-page .scatter-zone {
        padding: 24px 16px;
    }

    .axis-interview-page .scatter-copy {
        position: relative !important;
        width: 100% !important;
        margin-left: 0 !important;
    }

    .axis-interview-page .scatter-copy p {
        font-size: 3vw;
        line-height: 1.6;
    }

    #profCloud .prof-icon {
        width: 8%;
        height: auto;
    }

    .fieldtag {
        font-size: 3vw !important;
        padding: 5px 11px !important;
    }

    .axis-interview-page .stage-zone {
        padding: 32px 16px;
    }

    .axis-interview-page .stage-card {
        max-width: 100%;
        padding-top: 48px;
    }

    .axis-interview-page .card-meta__prof {
        font-size: 4.3vw;
    }

    .axis-interview-page .card-body {
        padding: 16px;
    }

    .axis-interview-page .qa-q {
        font-size: 3vw;
    }

    .axis-interview-page .qa-a {
        font-size: 3vw;
    }

    .axis-interview-page .cta-pill {
        font-size: 3vw;
        padding: 8px 19px;
    }

    /* ── Стайлгайд ── */
    .sg-wrapper {
        grid-template-columns: 1fr !important;
    }

    .sg-sidebar-left {
        position: relative !important;
        height: auto !important;
        padding: 16px !important;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #eee;
    }

    .sg-nav,
    .sg-footer-text {
        display: none;
    }

    .sg-content {
        padding: 19px 16px 48px;
    }

    .sg-main-title {
        font-size: 4.3vw;
        margin-bottom: 32px;
    }

    .sg-h2 {
        font-size: 3.3vw;
    }

    .sg-cards-grid {
        grid-template-columns: 1fr !important;
    }

    .sg-card-center {
        grid-column: 1 / 2 !important;
    }

    .sg-bottom-area {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        margin-top: 48px;
    }

    .sg-bottom-right {
        flex-wrap: wrap;
        gap: 8px;
    }

    /* ── Collab ── */
    .collab-page .container-skill {
        padding: 24px 16px;
    }

    .collab-page .hero-illustration-skill img {
        width: 100%;
        margin-left: 0;
    }

    .collab-page .quiz-header-block-skill h1 {
        width: 100%;
        font-size: 6.7vw;
        margin-left: 0;
        margin-bottom: 32px;
        text-align: left;
    }

    .collab-page .skill-icon-holder img {
        width: 22%;
        height: auto;
    }

}


/*СПЕЦПРОЕКТ */


@media (max-width: 56.25rem) {
    .axis-interview-page .scatter-zone {
        grid-template-columns: 1fr;
        padding-top: 40px;
        min-height: auto;
    }

    .axis-interview-page .scatter-copy {
        grid-column: 1;
        position: relative;
        z-index: 2;
    }

    .axis-interview-page .stage-zone {
        margin-left: 0;
    }
}


@media (max-width: 37.5rem) {
    .axis-interview-page .ribbon-word {
        font-size: 12vw;
    }

    .axis-interview-page .fieldtag {
        font-size: 2.5vw;
        padding: 5px 12px;
    }

    .axis-interview-page .card-audio {
        flex-wrap: wrap;
        gap: 8px;
    }

    .axis-interview-page .aud-wave {
        min-width: 100%;
        order: 3;
    }

    .axis-interview-page .aud-clock {
        order: 4;
    }
}


@media (max-width: 23.5rem) {
    .axis-interview-page .fieldtag {
        font-size: 3.8vw;
    }

    .axis-interview-page .card-body {
        padding: 16px 13px 19px;
    }
}


@media (prefers-reduced-motion: reduce) {
    .axis-interview-page .ribbon-track,
    .axis-interview-page .floater-gem,
    .float-fast,
    .float-medium,
    .float-slow {
        animation: none;
    }

    .axis-interview-page .stage-card {
        transition: none;
    }
}



.sg-body {
    margin: 0;
    padding: 0;
    background-color: #fff;
    color: #000;
    font-weight: 500;
    box-sizing: border-box;
}

.sg-body * {
    box-sizing: border-box;
}


.sg-wrapper {
    display: grid;
    grid-template-columns: 250px 1fr 200px;
    min-height: 100vh;
    max-width: 1920px;
    margin: 0 auto;
}

.sg-sidebar-left {
    position: sticky;
    top: 0;
    height: 100vh;
    padding: 40px 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: #fff;
    z-index: 10;
}

.sg-logo img {
    width: 10vw;
    height: auto;
}

.sg-nav {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: -100px;
}

.sg-nav-link {
    text-decoration: none;
    color: #000;
    font-family: 'Drukewidecyr', sans-serif;
    font-weight: 800;
    font-size: 14px;
    text-transform: uppercase;
    transition: opacity 0.2s;
}

.sg-nav-link:hover {
    opacity: 0.6;
}


.sg-active {
    display: flex;
    align-items: center;
}
.sg-bracket {
    margin: 0 4px;
    transform: translateY(-2px);
    font-family: 'Drukewidecyr', sans-serif;
}

.sg-footer-text {
    font-family: 'Drukewidecyr', sans-serif;
    font-weight: 800;
    font-size: 10px;
    line-height: 1.4;
    text-transform: uppercase;
}



.sg-sidebar-right {
    position: sticky;
    top: 0;
    height: 100vh;
    padding: 60px 20px;
    background: #fff;
}

.sg-anchor-nav {
    display: flex;
    flex-direction: column;
    gap: 15px;
    border-left: 1px solid #f0f0f0;
    padding-left: 20px;
}

.sg-anchor-nav a {
    text-decoration: none;
    color: #000;
    font-family: 'Drukewidecyr', sans-serif;
    font-weight: 800;
    font-size: 13px;
    border-bottom: 2px solid #000;
    width: fit-content;
    line-height: 1.2;
}
.sg-anchor-nav a:hover {
    opacity: 0.6;
}



.sg-content {
    padding: 40px 60px 80px 40px;
    border-left: 1px solid transparent;
}

.sg-back-btn {
    display: inline-block;
    text-decoration: none;
    color: #000;
    font-family: 'Drukewidecyr', sans-serif;
    font-weight: 900;
    font-size: 20px;
    margin-bottom: 30px;
}


.sg-main-title {
    font-family: 'Drukewidecyr', sans-serif;
    font-weight: 900;
    font-size: 36px;
    margin-bottom: 50px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 10px;
}



.sg-section {
    margin-bottom: 80px;
}

.sg-h2 {
    font-family: 'Drukewidecyr', sans-serif;
    font-weight: 900;
    font-size: 2vw;
    margin-bottom: 2vw;
}

.sg-desc {
    font-family: 'Akzidenzgroteskpro', sans-serif;
    font-size: 1.1rem;
    line-height: 1.5;
    margin-bottom: 2vw;
    margin-top: 1vw;
    color: #000;
}



.sg-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}


.sg-card-center {
    grid-column: 2 / 3;
}

.sg-card {
    position: relative;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-height: 250px;
}


.sg-card-corners {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border: 2px solid;
    border-radius: 16px;
    pointer-events: none;
}


.sg-card-icon {
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
}
.sg-placeholder img {
    width: 10vw;
    height: auto;
}

.sg-card-title {
    font-family: 'Drukewidecyr', sans-serif;
    font-weight: 900;
    font-size: 14px;
    margin: 0 0 5px 0;
}
.sg-hex {
    font-family: 'Drukewidecyr', sans-serif;
    font-weight: 800;
    font-size: 12px;
}

/* Цвета */
.sg-blue   { color: #5bb2ff; } .sg-bg-blue {  } .sg-border-blue { border-color: #5bb2ff; }
.sg-orange { color: #ff8c3f; } .sg-bg-orange { } .sg-border-orange { border-color: #ff8c3f; }
.sg-teal   { color: #80eaff; } .sg-bg-teal { } .sg-border-teal { border-color: #80eaff; }
.sg-pink   { color: #ff768d; } .sg-bg-pink { } .sg-border-pink { border-color: #ff768d; }
.sg-yellow { color: #e6bb77; } .sg-bg-yellow {  } .sg-border-yellow { border-color: #e6bb77; }
.sg-mint   { color: #80ddbf; } .sg-bg-mint {} .sg-border-mint { border-color: #80ddbf; }
.sg-gold   { color: #ffcd55; } .sg-bg-gold {  } .sg-border-gold { border-color: #ffcd55; }
.sg-grey   { color: #c2d3e5; } .sg-bg-grey { } .sg-border-grey { border-color: #c2d3e5; }
.sg-salmon { color: #f18e6d; } .sg-bg-salmon {} .sg-border-salmon { border-color: #f18e6d; }
.sg-lime   { color: #9cd75d; } .sg-bg-lime { } .sg-border-lime { border-color: #9cd75d; }


.sg-typo-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.sg-label {
    font-size: 12px;
    color: #666;
    margin-bottom: 10px;
    font-family: 'Akzidenzgroteskpro', sans-serif;
}

.sg-font-title-lg {
    font-family: 'Drukewidecyr', sans-serif;
    font-weight: 900;
    font-size: 32px;
    text-transform: uppercase;
    margin: 0 0 10px 0;
}
.sg-font-title-reg {
    font-family: 'Akzidenzgroteskpro', sans-serif;
    font-weight: 400;
    font-size: 28px;
    margin: 0 0 10px 0;
}

.sg-font-meta {
    font-size: 12px;
    margin-bottom: 20px;
    line-height: 1.6;
}

.sg-font-specs {
    list-style: none;
    padding: 0;
    font-family: 'Drukewidecyr', sans-serif;
    font-weight: 700;
    font-size: 12px;
    margin-bottom: 20px;
}

.sg-abc {
    font-size: 18px;
    line-height: 1.4;
    word-break: break-all;
}
.sg-abc-bold { font-family: 'Drukewidecyr', sans-serif; font-weight: 800; }
.sg-abc-reg { font-family: 'Akzidenzgroteskpro', sans-serif; }


.sg-logo-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: end;
}
.sg-logo-view {
    background: #f9f9f9;
    padding: 20px;
    text-align: center;
    border-radius: 8px;
}
.sg-logo-full {
    font-family: 'Drukewidecyr', sans-serif;
    font-weight: 900;
    font-size: 50px;
    letter-spacing: -2px;
}
.sg-logo-short {
    font-family: 'Drukewidecyr', sans-serif;
    font-weight: 900;
    font-size: 60px;
}



.sg-grid-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}
.sg-grid-visual {
    height: 150px;
    background: #f5f5f5;
    border: 1px dashed #ccc;
    border-radius: 6px;
    margin-top: 15px;
}



.sg-bottom-area {
    margin-top: 100px;
    border-top: 2px solid #000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 30px;
}

.sg-bottom-left {
    display: flex;
    align-items: center;
    gap: 20px;
}
.sg-logo-sm {
    font-family: 'Drukewidecyr', sans-serif;
    font-weight: 900;
    font-size: 40px;
}
.sg-arrow-long {
    font-size: 40px;
    font-weight: 300;
}
.sg-bottom-slogan {
    font-family: 'Drukewidecyr', sans-serif;
    font-weight: 800;
    font-size: 10px;
    text-transform: uppercase;
}

.sg-bottom-right {
    display: flex;
    gap: 15px;
}
.sg-btn {
    background: #1a1a1a;
    color: #fff;
    text-decoration: none;
    padding: 12px 20px;
    border-radius: 4px;
    font-family: 'Drukewidecyr', sans-serif;
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
}
.sg-btn:hover { background: #000; }
html.collab-root {
    font-size: 62.5%;
}

.collab-page {
    --color-bg-primary:       #fcfcfc;
    --color-bg-secondary:     #212121;
    --color-bg-card-light:    #e3e3e3;
    --color-bg-card-dark:     #1e1e1e;

    --color-text-dark:        #212121;
    --color-text-light:       #ffffff;
    --color-text-muted-dark:  #6e6e73;
    --color-text-muted-light: #aeaeae;

    --color-brand:            #2f34f5;
    --color-orange:           #ff7a3c;
    --color-border-light:     #fcfcfc;
    --color-border-dark:      #212121;

    --font-sans:              'Akzidenzgroteskpro', sans-serif;
    --font-display:           'Drukewidecyr', sans-serif;
    --font-monospace:         'Akzidenzgroteskpro', sans-serif;

    --transition-speed:       0.3s;

    font-family: var(--font-sans);
    background-color: var(--color-bg-primary);
    color: var(--color-text-dark);
    line-height: 1.5;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    box-sizing: border-box;

}


.collab-page h1,
.collab-page h2,
.collab-page h3,
.collab-page h4,
.collab-page h5 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
}


.collab-page .container-skill {
    width: 100%;
    margin: 0 auto;
    padding: 3.5rem 2.4rem;
}

.collab-page .section-skill {
    padding: 8.0rem 0;
}


.collab-page .inquiry-icon img {
    width: 11rem;
    margin-left: -1.6rem;
}

.collab-page .hero-illustration-skill img {
    width: 40rem;
    margin-left: -5rem;
}

.collab-page .prof-card-art-container img {
    width: 35rem;
    margin-left: -15rem;
    margin-top: -9rem;
}

.collab-page .mono-text {
    font-family: 'Akzidenzgroteskpro', sans-serif;
}

.collab-page .quiz-header-block-skill h1 {
    width: 70%;
    font-size: 5rem;
    align-items: center;
    text-align: center;
    justify-items: center;
    margin-bottom: 5rem;
    margin-left: 17rem;
}

.collab-page .course-gfx img {
    width: 30rem;
}

.collab-page .new-prof-illustration img {
    width: 20rem;
}

.collab-page .skill-icon-holder img {
    width: 10rem;
    justify-content: center;
    align-items: center;
    margin-left: 15rem;
}


.collab-page .fixed-header-skill {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 5.2rem;
    background-color: rgba(252, 252, 252, 0.9);
    backdrop-filter: blur(1.5rem);
    -webkit-backdrop-filter: blur(1.5rem);
    border-bottom: 0.1rem solid var(--color-border-dark);
    z-index: 1000 !important;
    display: flex;
    align-items: center;
    transition: background-color var(--transition-speed);
}

.collab-page .header-container-skill {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.collab-page .logo-skill {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    font-size: 2.0rem;
    font-family: var(--font-sans);
    font-weight: 700;
    text-decoration: none;
    color: var(--color-text-dark);
}

.collab-page .logo-skill-footer img {
    width: 40rem;
}

.collab-page .future-footer {
    position: absolute;
    margin-left: 13rem;
    margin-top: -38rem;
    z-index: 1;
}

.collab-page .nav-menu-skill {
    display: flex;
    gap: 3.2rem;
    list-style: none;
}

.collab-page .nav-link-skill {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--color-text-dark);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: color var(--transition-speed);
    padding: 0.8rem 0;
    position: relative;
}

.collab-page .nav-link-skill::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 0.2rem;
    background-color: var(--color-brand);
    transition: width var(--transition-speed);
}

.collab-page .nav-link-skill:hover {
    color: var(--color-brand);
}

.collab-page .nav-link-skill:hover::after {
    width: 100%;
}

/* ── HERO ─────────────────────────────────────────────────── */
.collab-page .hero-skill {
    padding-top: 15.2rem;
    background-color: var(--color-bg-primary);
    display: flex;
    flex-direction: column;
}

.collab-page .stat-number-dark {
    font-family: var(--font-display);
    color: var(--color-text-dark) !important;
}

.collab-page .hero-grid-skill {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 8rem;
    margin-top: -5rem;
    align-items: center;
}

.collab-page .hero-content-skill {
    display: flex;
    flex-direction: column;
    gap: 3.2rem;
}

.collab-page .hero-title-skill {
    font-size: 5.6rem;
    color: var(--color-text-dark);
}

.collab-page .hero-title-skill span {
    color: var(--color-brand);
}

.collab-page .hero-subtitle-skill {
    font-size: 2.0rem;
    color: var(--color-text-muted-dark);
    font-weight: 400;
    max-width: 52.0rem;
}

.collab-page .hero-actions-skill {
    display: flex;
    gap: 1.6rem;
}

.collab-page .btn-skill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
    padding: 1.8rem 3.2rem;
    border-radius: 0.8rem;
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: all var(--transition-speed);
    border: none;
}

.collab-page .btn-primary-skill {
    background-color: var(--color-text-dark);
    color: var(--color-text-light);
}

.collab-page .btn-primary-skill:hover {
    background-color: var(--color-brand);
    transform: translateY(-0.2rem);
}

.collab-page .btn-secondary-skill {
    background-color: var(--color-bg-card-light);
    color: var(--color-text-dark);
}

.collab-page .btn-secondary-skill:hover {
    background-color: var(--color-border-light);
    transform: translateY(-0.2rem);
}

.collab-page .hero-illustration-skill {
    display: flex;
    justify-content: center;
    align-items: center;
}

@keyframes collab-float {
    0%   { transform: translateY(0px) rotate(0deg); }
    50%  { transform: translateY(-1.5rem) rotate(2deg); }
    100% { transform: translateY(0px) rotate(0deg); }
}

/* ── STATS ────────────────────────────────────────────────── */
.collab-page .hero-stats-skill {
    margin-top: 8.0rem;
    border-top: 0.1rem solid var(--color-border-light);
    padding-top: 5.6rem;
}

.collab-page .stats-grid-skill {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4.8rem;
}

.collab-page .stat-item-skill {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.collab-page .stat-number {
    font-family: var(--font-display);
    font-size: 6.4rem;
    font-weight: 700;
    color: var(--color-brand);
    line-height: 1;
}

.collab-page .stat-number-alt  { color: var(--color-orange); }
.collab-page .stat-number-mono {
    font-family: var(--font-monospace);
    color: var(--color-text-dark);
}

.collab-page .stat-desc {
    font-size: 1.6rem;
    color: var(--color-text-muted-dark);
    font-weight: 500;
    line-height: 1.4;
}

/* ── MARKET SECTION ───────────────────────────────────────── */
.collab-page .market-section {
    background-color: var(--color-bg-secondary);
    color: var(--color-text-light);
}

.collab-page .market-title-skill {
    font-size: 4.8rem;
    max-width: 80.0rem;
    margin-bottom: 6.4rem;
    line-height: 1.1;
}

.collab-page .market-cards-skill {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3.2rem;
    margin-bottom: 8.0rem;
}

.collab-page .market-card-skill {
    border: 0.1rem solid var(--color-border-dark);
    border-radius: 1.2rem;
    padding: 4.0rem 3.2rem;
    background-color: rgba(255, 255, 255, 0.02);
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
    transition: border-color var(--transition-speed), transform var(--transition-speed);
}

.collab-page .market-card-skill:hover {
    border-color: var(--color-brand);
    transform: translateY(-0.4rem);
}

.collab-page .market-card-metric {
    font-family: var(--font-display);
    font-size: 3.6rem;
    font-weight: 700;
}

.collab-page .metric-purple { color: #8a3ffc; }
.collab-page .metric-orange  { color: #ff7a3c; }
.collab-page .metric-cyan    { color: #00ffd1; }

.collab-page .market-card-title {
    font-size: 2.0rem;
    font-weight: 600;
    margin-top: -1.2rem;
}

.collab-page .market-card-text {
    font-size: 1.5rem;
    color: var(--color-text-muted-light);
    line-height: 1.6;
}

/* ── SPEED / INDUSTRY ─────────────────────────────────────── */
.collab-page .speed-subsection {
    border-top: 0.1rem solid var(--color-border-dark);
    padding-top: 6.4rem;
}

.collab-page .speed-title {
    font-size: 3.2rem;
    margin-bottom: 4.8rem;
}

.collab-page .speed-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 6.4rem;
    align-items: center;
}

.collab-page .industry-list {
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
}

.collab-page .industry-item {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.collab-page .industry-info {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-monospace);
    font-size: 1.4rem;
    font-weight: 500;
}

.collab-page .industry-bar-bg {
    width: 100%;
    height: 0.8rem;
    background-color: var(--color-border-dark);
    border-radius: 9.9rem;
    overflow: hidden;
}

.collab-page .industry-bar-fill {
    height: 100%;
    border-radius: 9.9rem;
    transition: width 1.5s cubic-bezier(0.1, 0.8, 0.2, 1);
}

.collab-page .quote-box {
    background-color: rgba(255, 255, 255, 0.03);
    border: 0.1rem solid var(--color-border-dark);
    border-radius: 1.6rem;
    padding: 4.8rem;
    display: flex;
    flex-direction: column;
    gap: 3.2rem;
}

.collab-page .quote-text {
    font-size: 2.0rem;
    line-height: 1.5;
    font-weight: 500;
    color: var(--color-text-light);
}

.collab-page .quote-author {
    font-size: 1.4rem;
    color: var(--color-text-muted-light);
    font-family: var(--font-monospace);
}

/* ── INQUIRY ──────────────────────────────────────────────── */
.collab-page .inquiry-section {
    background-color: var(--color-bg-primary);
}

.collab-page .inquiry-title {
    font-size: 4.8rem;
    max-width: 80.0rem;
    margin-bottom: 6.4rem;
    line-height: 1.1;
}

.collab-page .inquiry-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3.2rem;
}

.collab-page .inquiry-card {
    background-color: var(--color-bg-card-light);
    border-radius: 1.6rem;
    padding: 4.8rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 3.2rem;
    position: relative;
    overflow: hidden;
}

.collab-page .inquiry-card-heading {
    font-size: 4.8rem;
    font-weight: 700;
    line-height: 1;
}

.collab-page .color-orange-txt { color: var(--color-orange); }
.collab-page .color-blue-txt   { color: var(--color-brand); }
.collab-page .color-pink-txt   { color: #e91e63; }

.collab-page .inquiry-card-text {
    font-size: 1.6rem;
    color: var(--color-text-muted-dark);
    max-width: 38.0rem;
    font-weight: 500;
}

.collab-page .inquiry-icon {
    position: absolute;
    right: 4.0rem;
    bottom: 4.0rem;
    width: 6.4rem;
    height: 6.4rem;
    opacity: 0.8;
}

.collab-page .chart-card {
    grid-column: span 2;
    flex-direction: row;
    align-items: center;
}

.collab-page .chart-data-side {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}

.collab-page .chart-visual-side {
    display: flex;
    align-items: center;
    gap: 4.8rem;
    margin-left: auto;
}

.collab-page .donut-container {
    position: relative;
    width: 14.0rem;
    height: 14.0rem;
}

.collab-page .donut {
    transform: rotate(-90deg);
}

.collab-page .donut-inner-txt {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.collab-page .donut-num {
    font-family: var(--font-display);
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1;
}

.collab-page .donut-label {
    font-size: 1.1rem;
    color: var(--color-text-muted-dark);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 0.2rem;
}

.collab-page .chart-legend {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    list-style: none;
}

.collab-page .legend-item {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    font-size: 1.4rem;
    font-weight: 500;
}

.collab-page .legend-color {
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
}

.collab-page .legend-blue   { background-color: var(--color-brand); }
.collab-page .legend-orange { background-color: var(--color-orange); }
.collab-page .legend-grey   { background-color: #caccd9; }

/* ── PROFESSIONS ──────────────────────────────────────────── */
.collab-page .professions-section-skill {
    background-color: var(--color-bg-primary);
    border-top: 0.1rem solid var(--color-border-light);
}

.collab-page .professions-title {
    font-size: 4.8rem;
    margin-bottom: 4.8rem;
    max-width: 80.0rem;
}

.collab-page .tab-nav {
    display: flex;
    gap: 1.6rem;
    margin-bottom: 5.6rem;
    overflow-x: auto;
    padding-bottom: 1.2rem;
}

.collab-page .tab-btn {
    padding: 1.2rem 3.2rem;
    background-color: var(--color-bg-card-light);
    border: 0.1rem solid transparent;
    border-radius: 9.9rem;
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-speed);
}

.collab-page .tab-btn:hover {
    background-color: #e4e6f1;
}

.collab-page .tab-btn.active {
    background-color: var(--color-text-dark);
    color: var(--color-text-light);
}

.collab-page .tab-content-panel {
    display: grid;
    grid-template-columns: 1.12fr 0.88fr;
    gap: 6.4rem;
    align-items: stretch;
    opacity: 1;
    transition: opacity var(--transition-speed);
}

.collab-page .prof-info-col {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 4.0rem;
}

.collab-page .prof-headline-block {
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
}

.collab-page .prof-name {
    font-size: 4.0rem;
    color: var(--color-text-dark);
}

.collab-page .prof-desc {
    font-size: 1.6rem;
    color: #3a3a3c;
    line-height: 1.6;
}

.collab-page .prof-metrics-block {
    display: flex;
    flex-direction: column;
    gap: 2.0rem;
}

.collab-page .btn-explore-test-skill {
    background-color: #E3E3E3;
}

.collab-page .prof-metric-item {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.collab-page .prof-metric-label {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-sans);
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--color-text-muted-dark);
}

.collab-page .prof-metric-val {
    font-family: var(--font-monospace);
    font-weight: 700;
    color: var(--color-text-dark);
}

.collab-page .prof-bar-bg {
    width: 100%;
    height: 0.6rem;
    background-color: var(--color-border-light);
    border-radius: 9.9rem;
    overflow: hidden;
}

.collab-page .prof-bar-fill {
    height: 100%;
    background-color: var(--color-text-dark);
    border-radius: 9.9rem;
    transition: width 0.8s cubic-bezier(0.1, 0.8, 0.2, 1);
}

.collab-page .prof-bar-fill.accent-blue   { background-color: var(--color-brand); }
.collab-page .prof-bar-fill.accent-orange { background-color: var(--color-orange); }
.collab-page .prof-bar-fill.accent-pink   { background-color: #e91e63; }

.collab-page .prof-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem;
}

.collab-page .prof-pill-tag {
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 1.3rem;
    padding: 0.8rem 1.6rem;
    background-color: var(--color-bg-card-light);
    border-radius: 9.9rem;
    color: var(--color-text-muted-dark);
}

.collab-page .prof-card-col {
    border-radius: 2.4rem;
    padding: 4.8rem;
    color: var(--color-text-dark);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    min-height: 42.0rem;
    box-shadow: 0 1.5rem 3.0rem rgba(0, 0, 0, 0.04);
    transition: background-color var(--transition-speed);
}

.collab-page .prof-card-top {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    z-index: 2;
}

.collab-page .prof-card-year {
    font-size: 4.0rem;
    font-weight: 700;
    line-height: 1;
}

.collab-page .prof-card-text {
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 1.5;
}

.collab-page .prof-card-art-container {
    position: absolute;
    bottom: -4.0rem;
    right: -4.0rem;
    width: 28.0rem;
    height: 28.0rem;
    opacity: 0.65;
    z-index: 1;
}

.collab-page .prof-card-art-container svg {
    width: 100%;
    height: 100%;
}

/* ── COURSES ──────────────────────────────────────────────── */
.collab-page .courses-section {
    background-color: #fafafa;
    border-top: 0.1rem solid var(--color-border-light);
}

.collab-page .courses-title {
    font-size: 4.8rem;
    margin-bottom: 5.6rem;
}

.collab-page .courses-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3.2rem;
}

.collab-page .course-card {
    background-color: #efefef;
    border: 0.1rem solid var(--color-border-light);
    border-radius: 2.0rem;
    padding: 4.0rem;
    display: flex;
    flex-direction: column;
    gap: 3.2rem;
    justify-content: space-between;
    box-shadow: 0 0.4rem 2.0rem rgba(0, 0, 0, 0.01);
    transition: all var(--transition-speed);
}

.collab-page .course-card:hover {
    transform: translateY(-0.8rem);
    box-shadow: 0 2.0rem 4.0rem rgba(0, 0, 0, 0.05);
    border-color: var(--color-brand);
}

.collab-page .course-details {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}

.collab-page .course-headline {
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--color-text-dark);
}

.collab-page .course-author-label {
    font-family: var(--font-monospace);
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--color-brand);
    background-color: rgba(47, 52, 245, 0.06);
    padding: 0.4rem 1.0rem;
    border-radius: 0.4rem;
    align-self: flex-start;
}

.collab-page .course-gfx {
    height: 16.0rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.collab-page .course-gfx svg {
    width: 14.0rem;
    height: 14.0rem;
    filter: drop-shadow(0 0.8rem 1.6rem rgba(0,10,120,0.06));
}

.collab-page .course-btn {
    background-color: var(--color-brand);
    color: var(--color-text-light);
    border-radius: 9.9rem;
    padding: 1.4rem 2.4rem;
    text-decoration: none;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.4rem;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.0rem;
    align-self: flex-start;
    transition: background-color var(--transition-speed), transform var(--transition-speed);
}

.collab-page .course-btn:hover {
    background-color: var(--color-text-dark);
    transform: scale(1.03);
}

/* ── QUOTES ───────────────────────────────────────────────── */
.collab-page .quotes-section-skill {
    background-color: var(--color-bg-primary);
    border-top: 0.1rem solid var(--color-border-light);
}

.collab-page .quotes-section-title {
    font-size: 4.8rem;
    margin-bottom: 5.6rem;
    max-width: 80.0rem;
}

.collab-page .quotes-grid-masonry {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3.2rem;
}

.collab-page .people-quote-card {
    border: 0.1rem solid #FF8C3F;
    border-radius: 2.0rem;
    padding: 4.8rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 4.0rem;
    background-color: #ffffff;
    transition: border-color var(--transition-speed);
}

.collab-page .people-quote-card:hover {
    border-color: var(--color-brand);
}

.collab-page .people-quote-body {
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 1.6;
    color: var(--color-text-dark);
}

.collab-page .people-quote-meta {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.collab-page .quote-signer {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--color-text-dark);
}

.collab-page .quote-signer-title {
    font-size: 1.3rem;
    color: var(--color-text-muted-dark);
}

/* ── NEW PROFESSIONS ──────────────────────────────────────── */
.collab-page .new-profs-section {
    background-color: var(--color-bg-primary);
    border-top: 0.1rem solid var(--color-border-light);
}

.collab-page .new-profs-title {
    font-size: 4.8rem;
    margin-bottom: 5.6rem;
    max-width: 80.0rem;
}

.collab-page .new-profs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3.2rem;
}

.collab-page .new-prof-card {
    border-radius: 2.0rem;
    padding: 4.0rem;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 4.0rem;
    min-height: 44.0rem;
    transition: all var(--transition-speed);
}

.collab-page .one   { border: 0.1rem solid #00A3FF; }
.collab-page .two   { border: 0.1rem solid #F06292; }
.collab-page .three { border: 0.1rem solid #ffb74d; }

.collab-page .one:hover   { border: 3px solid #00A3FF; }
.collab-page .two:hover   { border: 3px solid #F06292; }
.collab-page .three:hover { border: 3px solid #ffb74d; }

.collab-page .new-prof-top {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}

.collab-page .new-prof-heading {
    font-size: 2.4rem;
    color: var(--color-text-dark);
}

.collab-page .new-prof-descr {
    font-size: 1.5rem;
    color: var(--color-text-muted-dark);
    line-height: 1.6;
}

.collab-page .new-prof-illustration {
    height: 12.0rem;
    display: flex;
    align-items: flex-end;
}

.collab-page .new-prof-illustration svg {
    max-height: 100%;
}

/* ── SKILLS ───────────────────────────────────────────────── */
.collab-page .skills-section {
    background-color: var(--color-bg-secondary);
    color: var(--color-text-light);
}

.collab-page .skills-title-block {
    margin-bottom: 6.4rem;
    max-width: 72.0rem;
}

.collab-page .skills-title-block h2 {
    font-size: 4.8rem;
    line-height: 1.1;
}

.collab-page .skills-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2.4rem;
}

.collab-page .skill-card {
    background-color: rgba(255, 255, 255, 0.02);
    border: 0.1rem solid var(--color-border-dark);
    border-radius: 1.6rem;
    padding: 3.6rem 2.8rem;
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
    transition: all var(--transition-speed);
}

.collab-page .skill-card:hover {
    border-color: var(--color-brand);
    background-color: rgba(255, 255, 255, 0.04);
}

.collab-page .skill-icon-holder {
    width: 5.6rem;
    height: 5.6rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.collab-page .skill-icon-holder svg {
    width: 4.4rem;
    height: 4.4rem;
}

.collab-page .skill-headline  { font-size: 2.0rem; }

.collab-page .skill-paragraph {
    font-size: 1.4rem;
    color: var(--color-text-muted-light);
    line-height: 1.6;
}

/* ── QUIZ ─────────────────────────────────────────────────── */
.collab-page .quiz-section-skill {
    background-color: #fafafa;
    border-top: 0.1rem solid var(--color-border-light);
    border-bottom: 0.1rem solid var(--color-border-light);
}

.collab-page .quiz-header-block {
    text-align: center;
    max-width: 72.0rem;
    margin: 0 auto 5.6rem auto;
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}

.collab-page .quiz-section-title { font-size: 4.8rem; }

.collab-page .quiz-box-card {
    background-color: #ffffff;
    border: 0.1rem solid var(--color-border-light);
    border-radius: 2.4rem;
    padding: 5.6rem;
    max-width: 96.0rem;
    margin: 0 auto;
    box-shadow: 0 1.0rem 3.0rem rgba(0, 0, 0, 0.02);
    position: relative;
    overflow: hidden;
}

.collab-page .quiz-progress-bar-bg {
    width: 100%;
    height: 0.6rem;
    background-color: var(--color-border-light);
    border-radius: 9.9rem;
    margin-bottom: 3.2rem;
    overflow: hidden;
}

.collab-page .quiz-progress-bar-fill {
    width: 20%;
    height: 100%;
    background-color: var(--color-brand);
    border-radius: 9.9rem;
    transition: width 0.4s ease;
}

.collab-page .quiz-meta-info {
    display: flex;
    justify-content: space-between;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--color-text-muted-dark);
    margin-bottom: 4.0rem;
}

.collab-page .quiz-question-title {
    font-size: 2.8rem;
    line-height: 1.3;
    color: var(--color-text-dark);
    margin-bottom: 4.0rem;
}

.collab-page .quiz-options-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.0rem;
    margin-bottom: 4.8rem;
}

.collab-page .quiz-option-btn {
    background-color: var(--color-bg-primary);
    border: 0.15rem solid var(--color-border-light);
    border-radius: 1.2rem;
    padding: 3.2rem 2.8rem;
    font-family: var(--font-sans);
    font-size: 1.6rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: all var(--transition-speed);
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.collab-page .quiz-option-btn:hover {
    border-color: var(--color-brand);
    background-color: rgba(47, 52, 245, 0.02);
}

.collab-page .quiz-option-btn.selected {
    border-color: var(--color-brand);
    background-color: rgba(47, 52, 245, 0.06);
    box-shadow: 0 0 0 0.1rem var(--color-brand);
}

.collab-page .quiz-footer-actions {
    display: flex;
    justify-content: flex-end;
}

.collab-page .btn-next-skill {
    background-color: var(--color-text-dark);
    color: var(--color-text-light);
    border: none;
    border-radius: 0.8rem;
    padding: 1.6rem 3.6rem;
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 600;
    text-transform: uppercase;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 1.2rem;
    transition: all var(--transition-speed);
}

.collab-page .btn-next-skill:hover:not(:disabled) {
    background-color: var(--color-brand);
    transform: translateY(-0.2rem);
}

.collab-page .btn-next-skill:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ── RESULT ───────────────────────────────────────────────── */
.collab-page .result-view-wrapper {
    animation: collab-fadeIn 0.6s ease forwards;
}

@keyframes collab-fadeIn {
    from { opacity: 0; transform: translateY(1.5rem); }
    to   { opacity: 1; transform: translateY(0); }
}

.collab-page .result-top-badge-banner {
    background-color: var(--color-brand);
    color: var(--color-text-light);
    border-radius: 1.2rem;
    padding: 2.0rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.6rem;
    margin-bottom: 4.0rem;
}

.collab-page .result-top-badge-banner svg {
    width: 4.0rem;
    height: 4.0rem;
}

.collab-page .result-top-badge-title {
    font-family: var(--font-display);
    font-size: 2.4rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.collab-page .result-main-title {
    font-size: 4.8rem;
    text-align: center;
    margin-bottom: 2.4rem;
}

.collab-page .result-main-description {
    font-size: 1.8rem;
    text-align: center;
    color: var(--color-text-muted-dark);
    max-width: 76.0rem;
    margin: 0 auto 5.6rem auto;
    line-height: 1.6;
}

.collab-page .result-pillars-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.4rem;
    margin-bottom: 5.6rem;
}

.collab-page .result-pillar-card {
    background-color: var(--color-bg-card-light);
    border-radius: 1.6rem;
    padding: 3.2rem;
    display: flex;
    flex-direction: column;
    gap: 2.0rem;
}

.collab-page .result-pillar-label {
    font-family: var(--font-sans);
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--color-text-muted-dark);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.collab-page .result-pillar-value {
    font-family: var(--font-display);
    font-size: 2.8rem;
    font-weight: 700;
    color: var(--color-text-dark);
    line-height: 1.2;
}

.collab-page .result-pillar-desc {
    font-size: 1.4rem;
    color: #5a5a62;
    line-height: 1.5;
}

/* ── RECOMMEND BANNER ─────────────────────────────────────── */
.collab-page .sb-recommend-banner {
    background-color: #3b41ff;
    border-radius: 2.0rem;
    padding: 4.8rem;
    color: var(--color-text-light);
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 4.0rem;
}

.collab-page .sb-recommend-left {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    max-width: 52.0rem;
}

.collab-page .sb-badge {
    color: var(--color-orange);
    font-family: var(--font-monospace);
    font-size: 1.4rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.collab-page .sb-title {
    font-family: var(--font-display);
    font-size: 3.2rem;
    font-weight: 700;
    line-height: 1.2;
}

.collab-page .sb-text {
    font-size: 1.5rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.5;
}

.collab-page .sb-recommend-right { flex-shrink: 0; }

.collab-page .sb-btn {
    background-color: var(--color-orange);
    color: var(--color-text-light);
    padding: 1.8rem 3.6rem;
    border-radius: 1.0rem;
    text-decoration: none;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.6rem;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 1.2rem;
    transition: all var(--transition-speed);
}

.collab-page .sb-btn:hover {
    background-color: #f75d16;
    transform: translateY(-0.2rem);
}

/* ── FOOTER CTA ───────────────────────────────────────────── */
.collab-page .footer-cta-skill {
    background-color: var(--color-bg-primary);
    padding: 10.0rem 0 4.8rem 0;
    text-align: center;
}

.collab-page .footer-cta-title-skill {
    font-size: 5.6rem;
    text-align: center;
    max-width: 90.0rem;
    margin: 0 auto 2.4rem auto;
    line-height: 1.1;
    color: #FCFCFC;
}

.collab-page .footer-cta-title-skill span { color: var(--color-brand); }

.collab-page .footer-cta-subtitle-skill {
    font-size: 2.0rem;
    color: var(--color-text-muted-light);
    margin-bottom: 5rem;
}

.collab-page .footer-actions-skill {
    display: flex;
    justify-content: center;
    gap: 2.0rem;
    margin-bottom: 8.0rem;
    margin-top: 10rem;
}

.collab-page .btn-cta-white-skill {
    background-color: #ffffff;
    color: var(--color-text-dark);
    border: 0.15rem solid var(--color-border-light);
}

.collab-page .btn-cta-white-skill:hover {
    border-color: var(--color-brand);
    transform: translateY(-0.2rem);
}

.collab-page .btn-cta-blue-skill {
    background-color: var(--color-brand);
    color: var(--color-text-light);
}

.collab-page .btn-cta-blue-skill:hover {
    background-color: var(--color-text-dark);
    transform: translateY(-0.2rem);
}

.collab-page .footer-fine-print {
    font-size: 1.3rem;
    color: #FCFCFC;
    padding: 3.2rem 3.6rem;
    font-family: 'Akzidenzgroteskpro', sans-serif !important;
    margin-bottom: 4.8rem;
    justify-content: center;
    height: 5rem;
    border-top: 0.1rem solid var(--color-border-light);
}

.collab-page .footer-logo-row {
    border-top: 0.1rem solid var(--color-border-light);
    padding-top: 4.0rem;
    display: flex;
    justify-content: center;
}

.collab-page .footer-back-skill { background-color: #212121; }


@media (max-width: 1024px) {
    .collab-page .hero-grid-skill {
        grid-template-columns: 1fr;
        gap: 4.8rem;
    }
    .collab-page .hero-illustration-skill {
        grid-row: 1;
        margin-bottom: 2.4rem;
    }
    .collab-page .market-cards-skill { grid-template-columns: repeat(2, 1fr); }
    .collab-page .speed-grid          { grid-template-columns: 1fr; gap: 4.8rem; }
    .collab-page .inquiry-grid        { grid-template-columns: 1fr; }
    .collab-page .chart-card {
        grid-column: span 1;
        flex-direction: column;
        align-items: flex-start;
        gap: 4.0rem;
    }
    .collab-page .chart-visual-side {
        margin-left: 0;
        width: 100%;
        justify-content: space-between;
    }
    .collab-page .tab-content-panel    { grid-template-columns: 1fr; gap: 4.8rem; }
    .collab-page .prof-card-col        { min-height: 36.0rem; }
    .collab-page .courses-grid         { grid-template-columns: repeat(2, 1fr); }
    .collab-page .new-profs-grid       { grid-template-columns: repeat(2, 1fr); }
    .collab-page .skills-grid          { grid-template-columns: repeat(2, 1fr); }
    .collab-page .result-pillars-grid  { grid-template-columns: 1fr; gap: 2.0rem; }
    .collab-page .sb-recommend-banner  { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 768px) {
    .collab-page .hero-title-skill     { font-size: 4.0rem; }
    .collab-page .hero-actions-skill   { flex-direction: column; }
    .collab-page .stats-grid-skill     { grid-template-columns: 1fr; gap: 3.2rem; }
    .collab-page .market-title-skill   { font-size: 3.2rem; }
    .collab-page .market-cards-skill   { grid-template-columns: 1fr; }
    .collab-page .chart-visual-side    { flex-direction: column; align-items: center; gap: 3.2rem; }
    .collab-page .professions-title,
    .collab-page .courses-title,
    .collab-page .quotes-section-title,
    .collab-page .new-profs-title,
    .collab-page .quiz-section-title   { font-size: 3.2rem; }
    .collab-page .quotes-grid-masonry  { grid-template-columns: 1fr; }
    .collab-page .courses-grid         { grid-template-columns: 1fr; }
    .collab-page .new-profs-grid       { grid-template-columns: 1fr; }
    .collab-page .skills-grid          { grid-template-columns: 1fr; }
    .collab-page .quiz-options-grid    { grid-template-columns: 1fr; }
    .collab-page .quiz-box-card        { padding: 3.2rem 2.0rem; }
    .collab-page .footer-cta-title-skill { font-size: 3.6rem; }
    .collab-page .footer-actions-skill { flex-direction: column; gap: 1.6rem; }
    .collab-page .nav-menu-skill       { gap: 1.6rem; }
    .collab-page .nav-link-skill       { font-size: 1.2rem; }
}