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; }


.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;
}


.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;
}
@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;
    width: 100%;
}


/* --- ПЛАНШЕТ (до 1024px) --- */
@media screen and (max-width: 1024px) {

    /*категории*/

    .main-wrapper {
        display: block;
    }

    .sidebar {
        display: none;
    }

    .mobile-header {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        padding: 2vw 5vw;
        background: #fff;
        position: sticky;
        top: 0;
        z-index: 100;
        border-bottom: 1px solid #eee;
    }

    .mob-logo-icon img {
        width: 10vw;
    }


    .mob-burger {
        font-size: 2.5rem;
        cursor: pointer;
    }

    .content {
        padding: 4vw;
    }


    .catalog-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 3vw;
        margin-top: 2rem;
    }

    .cat-card {
        height: 10vw;
        width: 100%;
        border-radius: 1.5rem;
        padding: 2rem;
        position: relative;
        overflow: hidden;
        display: flex;
        align-items: center;
    }

    .card-title span{
        font-size: 1.5rem;
        font-weight: 700;
        color: #212121;
        max-width: 60%;
        line-height: 1.1;
        z-index: 2;
    }

.card-filter{
    font-size: 0.5rem;
}

/*о нас*/

    .content {
        padding: 4vw;
    }

    .about-layout {
        flex-direction: column;
        gap: 3rem;
    }

    .about-visuals {
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        gap: 2rem;
    }

    .about-img {
        width: 30vw;
        height: auto;
    }

/*главная*/
    .top-content-grid {
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }

    h2.section-title,
    .banner-content h2 {
        font-size: 1.8rem !important;
        line-height: 1.1;
        margin-bottom: 1rem;
        letter-spacing: -0.02em;
    }

    /* 3. Список категорий */
    .categories-list {
        border: 1px solid #000;
        border-radius: 15px;
        padding: 0;
        margin-bottom: 2rem;
        background: #fff;
    }

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

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

    .cat-item a {
        font-size: 1.1rem;
        font-weight: 900;
        text-transform: uppercase;
        text-decoration: none;
        color: #000;
    }

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


    .promo-banner {
        display: flex;
        flex-direction: column;
        padding: 25px;
        background-color: #FFC5D7;
        border-radius: 10px;
        overflow: hidden;
        position: relative;

    }

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

    .banner-btn{
        font-size: 0.7rem;
        margin-top: 1rem;
        padding: 0.5rem;
    }
.articles-section{
    margin-top: 2.5rem;
    width: 100%;
    overflow: hidden;
}
.articles-section h2{
    font-size: 0.8rem;
}
    .steps p {
        width: 100% !important;
        font-size: 0.9rem;
        margin: 5px 0;
        opacity: 0.8;
    }

    .banner-image {
        width: 80%;
        margin: 20px 0 0 auto;
        display: block;
        position: relative;
        right: -10%;
    }

    /* 5. Карточки профессий */
    .cards-grid {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 20px;
        padding: 10px 4vw 30px;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .card, .card-orange, .card-green {
        flex: 0 0 85vw;
        max-width: 40vh;
        scroll-snap-align: start;
        display: flex;
        flex-direction: column;
        height: auto;
        min-height: 30vh;
    }

    .btn-read{
        font-family: 'Akzidenzgroteskpro', sans-serif;
        font-size: 0.7rem;
        padding: 0.4rem 1rem;
    }

    .card-header span:first-child {
        font-size: 1.5rem;
        line-height: 1.1;
    }


    .card-header span:first-child {
        font-size: 1.4rem;
        display: block;
        margin-bottom: 10px;
        line-height: 1;
    }

    .card-header.text {
        font-size: 0.6rem;
    }
    .banner-content{
        width: 100%;
    }
.main-mob{
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    margin-top: 2vw !important;
    z-index: 100;
}

    .hero-top-nav, .slider-track, .pagination, .slider-viewport, .hero-section{
        display: none;
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    .trends-grid {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        gap: 1rem;
        padding: 10px 4vw 30px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

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

    /* 2. Сама карточка тренда */
    .trend-card {
        flex: 0 0 75vw;
        background-color: #F1F1F1;
        border-radius: 10px;
        padding: 1.5rem;
        scroll-snap-align: start;
        min-height: 250px;
        display: flex;
        flex-direction: column;
    }


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


    .trend-card h3 {
        font-size: 1.2rem;
        font-weight: 900;
        line-height: 1.2;
        margin: 0;
        text-transform: none;
    }


    .trend-img {
        width: 100px !important;
        height: auto !important;
        align-self: flex-end;
        margin-top: 1rem;
        object-fit: contain;
    }

    .mobile-footer {
        display: block !important;
        width: 100%;
        background-color: #fff;
        padding: 2rem 4vw 3rem;
        border-top: 1.5px solid #000;
        margin-top: 3rem;
    }


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

    /* 3. Логотип */
    .mobile-footer .mob-logo-icon img {
        height: 2.2rem;
        display: block;
    }


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


    .footer-line-mob img {
        width: 25px;
        height: auto;
        position: absolute;
        right: -2px;
        transform: translateY(0);
    }

    /* 5. Текст слогана */
    .footer-slogan-mob {
        font-size: 0.9rem;
        font-weight: 900;
        line-height: 1;
        text-transform: uppercase;
        white-space: nowrap;
        color: #000;
        letter-spacing: 0.02em;
    }

/*статьи*/

    .ax-header {
        margin-bottom: 2rem;
    }

    .ax-back-link {
        font-size: 1.1rem;
        display: flex;
        align-items: center;
        text-decoration: none;
        font-weight: bold;
    }

    /* Заголовок в скобках [] */
    .ax-hero-title {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 1rem;
        margin-bottom: 2rem;
    }

    .ax-title-text {

        text-transform: uppercase;
        font-weight: 800;
    }
    .ax-title-text span{
        font-size: 0.4rem !important;
        text-wrap: wrap !important;
    }

    .ax-bracket {
        height: 3.5rem;
        width: auto;
    }

    /* Текст вступления */
    .ax-intro-text, .ax-text {
        font-size: 0.9rem;
        line-height: 1.5;
    }

    /* Заголовки секций */
    .ax-section-title, .ax-list-checked li {
        font-size: 1rem;
        margin-bottom: 1.5rem;
        font-weight: 500;
    }

    .article span {
        font-size: 1.2rem;
    }

    .ax-icon-arrow img{
        width: 1rem;
    }

    /* Списки с иконками/стрелками */
    .ax-grid-2-col {

        display: flex;
        flex-direction: column;
        gap: 0;
    }
    .ax-grid-2-col a{
        text-decoration-line: none;
    }

    .ax-grid-2-col li{
        font-size: 1rem;
        text-decoration-line: underline;
        text-decoration-color: #00A3FF;
    }

    /* Списки */
    .ax-list-checked li {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .it-li li{
        text-decoration-line: none !important;
        text-wrap: auto !important;
        width: 65vw !important;
        font-size: 0.9rem !important;
    }


    .ax-list-checked li, .ax-list-checked-yellow li, .ax-list-checked-turquoise li, .ax-list-checked-orange li, .ax-list-checked-rose li {
        position: relative;
        padding-left: 3.5rem;
        margin-bottom: 1.8rem;
        font-size: 1rem;
        line-height: 1.2;
        color: #212121;
        text-wrap: nowrap;
        display: flex;
        align-items: center;
        text-transform: lowercase;
    }


    .ax-list-checked li::before {
        content: '→';
        position: absolute;
        left: 0;
        color: #00A3FF;
        font-size: 1.5rem;
        font-weight: 900;
        background-size: contain;
        background-position: center;
    }

    .ax-list-checked-yellow li::before {
        content: '→';
        position: absolute;
        left: 0;
        color: #ffb74d;
        font-size: 1.5rem;
        font-weight: 900;
        background-size: contain;
        background-position: center;
    }
    .ax-list-checked-orange li::before {
        content: '→';
        position: absolute;
        left: 0;
        color: #be5f0a;
        font-size: 1.5rem;
        font-weight: 900;
        background-size: contain;
        background-position: center;
    }

    .ax-list-checked-turquoise li::before {
        content: '→';
        position: absolute;
        left: 0;
        color: #00d2d3;
        font-size: 1.5rem;
        font-weight: 900;
        background-size: contain;
        background-position: center;
    }

    .ax-list-checked-rose li::before {
        content: '→';
        position: absolute;
        left: 0;
        color: #F06292;
        font-size: 1.5rem;
        font-weight: 900;
        background-size: contain;
        background-position: center;
    }

    .ax-list-checked-green li::before {
        content: '→';
        position: absolute;
        left: 0;
        color: #6cce96;
        font-size: 1.5rem;
        font-weight: 900;
        background-size: contain;
        background-position: center;
    }
    .ax-content-wrapper {
        padding: 0;
    }

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

    .cards-grid-test {
        display: flex;
        flex-direction: column;
        gap: 8rem; /* Большой отступ между блоками как на макете */
    }

    .nexus-unit {
        width: 100%;
        max-width: 60rem;
        margin: 0 auto;
        text-align: left;
    }

    .ethereal-artifact {
        width: 100%;
        height: auto;
        display: block;
        margin-bottom: 2rem;
    }

    /* Заголовки с подчеркиванием */
    .anchor-sigil {
        font-size: 1.2rem;
        line-height: 1.1;
        font-weight: 900;
        text-transform: uppercase;
        margin-bottom: 1.5rem;
        display: inline-block;
        border-bottom: 0.6rem solid #212121; /* Жирное подчеркивание */
    }

    .portal-access {
        display: flex;
        align-items: center;
        gap: 1rem;
        font-size: 1.3rem;
        text-decoration: none;
        color: #212121;
        font-family: 'Akzidenzgroteskpro', sans-serif;
        font-weight: 500;
        margin-bottom: 2rem;
    }
    .portal-access img { width: 1.5rem; }

    .data-stream {
        font-size: 1.2rem;
        line-height: 1.5;
        color: #212121;
        margin-bottom: 3rem;
    }

    .btn-cta {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        background: #212121;
        color: #fff;
        text-decoration: none;
        padding: 1rem 2rem;
        border-radius: 10px;
        font-size: 1,5rem;
        font-weight: 800;
        transition: transform 0.2s;
    }

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





}

/* --- МОБИЛЬНЫЕ УСТРОЙСТВА (до 480px) --- */
@media screen and (max-width: 480px) {

    /*категории*/

    .ax-hero-title {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 0.5rem;
        margin-bottom: 2rem;
    }

    .ax-title-text, .ax-bracket {
        font-size: 0.4rem;
        font-weight: 800;
        margin-top: 2rem;
    }

    .ax-bracket {
        width: 4vw;
        height: auto;
    }


    .catalog-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .cat-card {
        height: 18vw;
        min-height: 80px;
        padding: 0 1.5rem;
        border-radius: 0.8rem;
        text-decoration: none;
    }

    .card-title {

    }


    .card-icon {
        position: absolute;
        right: -2vw;
        top: 50%;
        transform: translateY(-50%);
        width: 35vw; /* Крупные иконки */
        height: auto;
        z-index: 1;
        pointer-events: none;
    }

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

    }


    .bg-blue { background-color: #64B5F6; }
    .bg-orange { background-color: #FF9E57; }
    .bg-pink { background-color: #F06292; }
    .bg-cyan { background-color: #80DEEA; }
    .bg-beige { background-color: #E6C58B; }
    .bg-mint { background-color: #80CBC4; }
    .bg-yellow { background-color: #FFD54F; }
    .bg-grey-blue { background-color: #CFD8DC; }
    .bg-salmon { background-color: #EF9A9A; }
    .bg-green { background-color: #AED581; }


    .filter-buttons {
        display: flex;
        overflow-x: hidden;
        text-wrap: auto;
        padding-bottom: 1rem;
        gap: 0.5rem;
    }

    .btn-filter {
        width: 10vw;
        white-space: nowrap;
        border-radius: 0.5rem;
        font-size: 0.5rem;
        border: 1px solid #ddd;
        background: #fff;
    }


    .professions-grid {
        display: grid;
        grid-template-columns: 1fr 1fr !important;
        gap: 1rem;
        margin-top: 2rem;
    }

    .card-filter {
        background: #F5F5F5;
        border-radius: 1rem;
        padding: 0.5rem;
        min-height: 120px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 25vw;
    }

    .card-filter h3 {
        font-size: 1rem;
        margin: 0;
    }

    .card-filter img {
        width: 50%;
        align-self: flex-end;
        justify-content: end;
        margin-top: 5vw;
    }


    .content-footer-main, .content-footer {
        display: none;
    }

    .btn-black {
        background: #212121;
        color: #fff;
        padding: 1rem;
        border-radius: 0.5rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        border: none;
        font-weight: bold;
    }


    .card-filter h3{
        font-size: 0.4rem;
    }


/*о нас*/

    .content {
        padding: 5vw 4vw;
    }


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

    .ax-title-text {
        font-size: 1.1rem;
        font-weight: 900;
        text-transform: uppercase;
        white-space: nowrap;
    }

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


    .text-section {
        margin-bottom: 2.5rem;
    }

    .text-section h2 {
        font-size: 1.3rem;
        font-weight: 800;
        margin-bottom: 1.2rem;
    }

    .text-section p {
        font-size: 1rem;
        line-height: 1.4;
    }


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

    .who-list li {
        position: relative;
        padding-left: 2.5rem;
        margin-bottom: 1.5rem;
        font-size: 1rem;
        line-height: 1.3;
        display: flex;
        align-items: center;
        min-height: 2rem;
    }


    .who-list li::before {
        content: "➔";
        position: absolute;
        left: 0;
        font-size: 1.5rem;
        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: 2rem;
        border-top: 0.1rem solid #eee;
        padding-top: 1.5rem;
    }



    .footer-logo {
        flex-shrink: 0;
    }

    .footer-logo img {
        height: 3rem;
        width: auto;
    }

    .footer-line-main {
        flex-grow: 1;
        display: flex;
        align-items: center;
    }

    .footer-line-main img {
        width: 100%;
        height: auto;
        min-width: 3rem;
    }

    .footer-slogan-main {
        flex-shrink: 0;
        font-size: 0.85rem;
        font-weight: 800;
        line-height: 1.1;
        text-transform: uppercase;
        text-align: center;
        max-width: 10rem;
        margin-left: -15vw;
    }

    .footer-buttons-main {
        display: none;
    }

/*главная*/

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

    .banner-content h2 {
        font-size: 1.8rem;
    }



















}

.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; }