/* OskinLab v4 — главная страница максимально близко к выбранному референсу */

:root {

  --v4bg: #020914;

  --v4panel: #04101b;

  --v4line: rgba(69, 170, 231, .32);

  --v4text: #f5f7fa;

  --v4muted: #b0c0cc;

  --v4blue: #12aefb;

  --v4cyan: #62d2ff
}

body.v4 {

  margin: 0;

  background: #020914;

  color: var(--v4text);

  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  overflow-x: hidden
}

.v4 \* {

  box-sizing: border-box
}

.v4 a {

  text-decoration: none;

  color: inherit
}

.v4-shell {

  width: min(1320px, calc(100% - 64px));

  margin-inline: auto
}

.v4-header {

  height: 56px;

  background: #020914;

  border-bottom: 1px solid rgba(99, 196, 255, .22);

  position: relative;

  z-index: 50
}

.v4-nav {

  height: 100%;

  display: flex;

  align-items: center
}

.v4-brand {

  font-size: 22px;

  font-weight: 850;

  letter-spacing: -.8px
}

.v4-brand span,

.v4-hero h1 span {

  color: #13aefb
}

.v4-links {

  margin-left: auto;

  display: flex;

  gap: 44px;

  font-size: 13px;

  font-weight: 600
}

.v4-links a {

  opacity: .92
}

.v4 .menu-btn {

  display: block;

  margin-left: 54px;

  width: 34px;

  height: 34px;

  border: 0;

  background: transparent;

  padding: 4px;

  cursor: pointer
}

.v4 .menu-btn span {

  display: block;

  height: 2px;

  background: #fff;

  margin: 6px 0;

  border-radius: 4px
}

.v4-hero {

  height: 334px;

  position: relative;

  overflow: hidden;

  border-bottom: 1px solid rgba(85, 185, 245, .26);

  background: #020914
}

.v4-hero:after {

  content: "";

  position: absolute;

  inset: 0;

  background: linear-gradient(90deg, #020914 0%, rgba(2, 9, 20, .96) 29%, rgba(2, 9, 20, .72) 43%, rgba(2, 9, 20, .08) 64%, rgba(2, 9, 20, .06) 100%);

  pointer-events: none
}

.v4-hero-art {

  position: absolute;

  right: 0;

  top: 0;

  width: 74%;

  height: 100%;

  background: url('assets/hero-v4.webp') center right/cover no-repeat;

  filter: saturate(1.08) contrast(1.04)
}

.v4-hero-inner {

  height: 100%;

  position: relative;

  z-index: 2;

  display: flex;

  align-items: center
}

.v4-hero-copy {

  width: 48%;

  padding-top: 2px
}

.v4-eyebrow {

  font-size: 10px;

  font-weight: 800;

  letter-spacing: .23em;

  color: #58c7ff;

  margin-bottom: 18px
}

.v4-eyebrow i {

  font-style: normal;

  color: #6c8290;

  margin: 0 8px
}

.v4-hero h1 {

  font-size: 69px;

  line-height: .84;

  letter-spacing: -.06em;

  margin: 0 0 14px;

  font-weight: 850
}

.v4-hero h2 {

  font-size: 25px;

  line-height: 1.12;

  letter-spacing: -.025em;

  margin: 0 0 13px;

  font-weight: 780
}

.v4-hero p {

  font-size: 16px;

  line-height: 1.45;

  color: #c0ccd5;

  margin: 0;

  max-width: 445px
}

.v4-primary {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 18px;

  min-width: 174px;

  height: 49px;

  padding: 0 25px;

  margin-top: 18px;

  border-radius: 10px;

  background: linear-gradient(135deg, #18b8ff, #0787f8);

  font-weight: 760;

  font-size: 15px;

  box-shadow: 0 12px 28px rgba(0, 137, 255, .22)
}

.v4-primary span {

  font-size: 20px
}

.v4-tags {

  display: flex;

  align-items: center;

  gap: 13px;

  margin-top: 15px;

  color: #78bddf;

  font-size: 8px;

  font-weight: 700;

  letter-spacing: .24em;

  white-space: nowrap
}

.v4-tags b {

  font-size: 7px;

  color: #9adfff
}

.v4-projects {

  padding-top: 16px
}

.v4-section-title {

  height: 43px;

  display: flex;

  align-items: center;

  justify-content: space-between
}

.v4-section-title h2 {

  font-size: 30px;

  line-height: 1;

  margin: 0;

  letter-spacing: -.035em
}

.v4-section-title a {

  font-size: 12px;

  color: #4dcbff
}

.v4-section-title a span {

  margin-left: 8px
}

.v4-featured {

  height: 540px;

  border: 1px solid var(--v4line);

  border-radius: 14px;

  position: relative;

  overflow: hidden;

  display: grid;

  grid-template-columns: 47% 53%;

  background: linear-gradient(135deg, #061521, #020914 74%)
}

.v4-featured-bg {

  position: absolute;

  inset: 0;

  background: url('assets/space-card-v4.webp') center/cover no-repeat;

  opacity: .34;

  filter: saturate(.8) contrast(1.14)
}

.v4-featured:after {

  content: "";

  position: absolute;

  inset: 0;

  background: linear-gradient(90deg, rgba(2, 9, 20, .97) 0%, rgba(2, 9, 20, .86) 39%, rgba(2, 9, 20, .32) 62%, rgba(2, 9, 20, .1) 100%);

  pointer-events: none
}

.v4-featured-copy {

  position: relative;

  z-index: 3;

  padding: 31px 0 24px 32px
}

.v4-app-icon {

  width: 104px;

  height: 104px;

  display: block;

  border-radius: 22px;

  object-fit: cover;

  box-shadow: 0 0 28px rgba(37, 167, 255, .16)
}

.v4-kicker {

  margin-top: 11px;

  color: #75cfff;

  font-size: 8px;

  font-weight: 700;

  letter-spacing: .3em
}

.v4-featured h3 {

  font-size: 51px;

  line-height: .95;

  margin: 9px 0 8px;

  letter-spacing: -.045em
}

.v4-featured h4 {

  font-size: 19px;

  line-height: 1.2;

  margin: 0 0 12px;

  font-weight: 580
}

.v4-featured-copy>p {

  max-width: 420px;

  color: #c0ccd5;

  font-size: 15px;

  line-height: 1.45;

  margin: 0
}

.v4-actions {

  display: flex;

  gap: 16px;

  align-items: center;

  margin-top: 18px
}

.v4-actions .v4-primary {

  margin: 0;

  min-width: 161px;

  height: 49px
}

.v4-store {
  height: 49px;
  min-width: 230px;
  padding: 0 18px;
  border: 1px solid rgba(119, 202, 248, .65);
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 15px;
  background: rgba(2, 10, 18, .66);
  white-space: nowrap;
}

.v4-play {

  font-size: 15px;

  color: #58d0ff;

  margin-right: 8px
}

.v4-feature-strip {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 12px;

  margin-top: 32px;

  width: 450px
}

.v4-feature-strip>div {

  display: flex;

  align-items: center;

  gap: 10px;

  color: #c2d0da;

  font-size: 10px;

  line-height: 1.35
}

.v4-feature-strip b {

  flex: 0 0 35px;

  width: 35px;

  height: 35px;

  border-radius: 8px;

  display: grid;

  place-items: center;

  background: #0a2940;

  color: #48c8ff;

  font-size: 17px;

  border: 1px solid rgba(76, 184, 247, .12)
}

.v4-phone-stage {

  position: relative;

  z-index: 4;

  min-width: 0;

  overflow: hidden
}

.v4-phone {

  position: absolute;

  background: linear-gradient(145deg, #1a2b39, #03070a 47%, #163047);

  padding: 6px;

  border-radius: 31px;

  border: 1px solid rgba(169, 222, 255, .48);

  box-shadow: 0 28px 58px rgba(0, 0, 0, .55);

  overflow: hidden
}

.v4-phone img {

  display: block;

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: top center;

  border-radius: 25px;

  filter: saturate(.92) contrast(1.04) brightness(.95)
}

.v4-phone-overview {

  width: 245px;

  height: auto;

  aspect-ratio: 691 / 1421;

  left: 55px;

  top: 14px;

  transform: rotate(-3.5deg)
}

.v4-phone-modules {

  width: 240px;

  height: auto;

  aspect-ratio: 691 / 1421;

  right: 30px;

  top: 22px;

  transform: rotate(3.5deg)
}

.v4-project-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 14px;

  margin-top: 14px
}

.v4-small-card {

  height: 200px;

  border: 1px solid var(--v4line);

  border-radius: 14px;

  position: relative;

  overflow: hidden;

  background: linear-gradient(135deg, #061521, #03101a);

  padding: 22px 24px
}

.v4-small-card:after {

  content: "";

  position: absolute;

  inset: 0;

  background: linear-gradient(90deg, rgba(3, 12, 21, .98) 0%, rgba(3, 12, 21, .82) 54%, rgba(3, 12, 21, .22) 100%);

  pointer-events: none
}

.v4-small-art {

  position: absolute;

  right: 0;

  top: 0;

  width: 54%;

  height: 100%;

  object-fit: cover;

  object-position: center;

  opacity: .9
}

.v4-small-copy {
  position: relative;
  z-index: 2;
  width: 64%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.v4-small-head {

  display: flex;

  align-items: center;

  gap: 13px
}

.v4-small-icon {

  width: 56px;

  height: 56px;

  border-radius: 13px;

  display: grid;

  place-items: center;

  background: linear-gradient(145deg, #123452, #071a2b);

  border: 1px solid rgba(81, 186, 247, .28);

  font-size: 31px;

  color: #51c9ff
}

.v4-small-head h3 {

  font-size: 22px;

  line-height: 1;

  margin: 0 0 6px
}

.v4-small-head small {

  display: block;

  font-size: 7px;

  letter-spacing: .28em;

  color: #68c6f2;

  white-space: nowrap
}

.v4-small-copy>p {

  font-size: 12px;

  line-height: 1.45;

  margin: 13px 0 0;

  color: #d0dae1;

  max-width: 285px
}

.v4-arrow {
  position: static;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-top: auto;
  color: #dce9f2;
  font-size: 13px;
  font-weight: 650;
  line-height: 1;
  white-space: nowrap;
}

.v4-arrow span {
  color: #42c9ff;
  font-size: 18px;
  line-height: 1;
  transition: transform .2s ease;
}

.v4-arrow:hover span {
  transform: translateX(4px);
}

.bars-icon {

  display: flex;

  align-items: flex-end;

  justify-content: center;

  gap: 5px;

  padding: 12px
}

.bars-icon i {

  display: block;

  width: 7px;

  border-radius: 4px;

  background: linear-gradient(#42c9ff, #0b84e8)
}

.bars-icon i:nth-child(1) {

  height: 17px
}

.bars-icon i:nth-child(2) {

  height: 29px
}

.bars-icon i:nth-child(3) {

  height: 40px
}

.v4-about {

  padding-top: 14px;

  padding-bottom: 21px
}

.v4-about-title {

  height: 43px;

  display: flex;

  align-items: center;

  justify-content: space-between
}

.v4-about-title h2 {

  font-size: 29px;

  line-height: 1;

  margin: 0;

  letter-spacing: -.035em
}

.v4-about-title span {

  font-size: 8px;

  letter-spacing: .28em;

  color: #6cb9df
}

.v4-about-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 13px
}

.v4-info {

  min-height: 95px;

  border: 1px solid var(--v4line);

  border-radius: 12px;

  display: flex;

  align-items: center;

  gap: 15px;

  padding: 16px 18px;

  background: #04101a
}

.v4-info-icon {

  flex: 0 0 50px;

  width: 50px;

  height: 50px;

  border-radius: 12px;

  display: grid;

  place-items: center;

  background: #0a2b43;

  border: 1px solid rgba(79, 185, 247, .18);

  color: #35c5ff;

  font-size: 29px
}

.v4-info h3 {

  font-size: 13px;

  margin: 0 0 8px
}

.v4-info p {

  font-size: 10px;

  line-height: 1.4;

  margin: 0;

  color: #9fb2c0
}

.v4-footer {

  border-top: 1px solid rgba(87, 184, 241, .22);

  min-height: 100px;

  background: #020914
}

.v4-footer-inner {

  min-height: 100px;

  display: grid;

  grid-template-columns: 1fr auto auto;

  gap: 35px;

  align-items: center
}

.v4-footer-inner>div:first-child {

  display: flex;

  flex-direction: column
}

.v4-footer b {

  font-size: 13px
}

.v4-footer span {

  font-size: 10px;

  color: #88a0b2
}

.v4-footer-links {

  display: flex;

  align-items: center;

  gap: 13px;

  font-size: 10px;

  color: #a8bfd0
}

.v4-footer-links i {

  color: #57cfff
}

.v4-social {

  display: flex;

  gap: 15px;

  align-items: center;

  color: #fff;

  font-size: 17px
}

@media(max-width:900px) {

  .v4-shell {

    width: min(100% - 40px, 760px)
  }

  .v4-links {

    display: none;

    position: absolute;

    left: 20px;

    right: 20px;

    top: 56px;

    background: #03101b;

    border: 1px solid rgba(80, 186, 247, .22);

    border-radius: 12px;

    padding: 18px;

    flex-direction: column;

    gap: 14px
  }

  .v4-links.open {

    display: flex
  }

  .v4 .menu-btn {

    margin-left: auto
  }

  .v4-hero {

    height: 620px
  }

  .v4-hero-art {

    width: 100%;

    height: 47%;

    top: auto;

    bottom: 0;

    background-position: 58% center
  }

  .v4-hero:after {

    background: linear-gradient(180deg, #020914 0%, rgba(2, 9, 20, .99) 46%, rgba(2, 9, 20, .58) 68%, rgba(2, 9, 20, .12) 100%)
  }

  .v4-hero-inner {

    align-items: flex-start;

    padding-top: 62px
  }

  .v4-hero-copy {

    width: 100%
  }

  .v4-hero h1 {

    font-size: 72px
  }

  .v4-hero h2 {

    font-size: 30px;

    max-width: 600px
  }

  .v4-hero p {

    font-size: 17px;

    max-width: 600px
  }

  .v4-featured {

    height: 1020px;

    display: block
  }

  .v4-featured-copy {

    padding: 34px 28px 0
  }

  .v4-phone-stage {

    position: absolute;

    left: 0;

    right: 0;

    bottom: 0;

    height: 540px
  }

  .v4-phone-overview {

    left: 12%;

    top: 12px
  }

  .v4-phone-modules {

    right: 8%;

    top: 27px
  }

  .v4-project-grid {

    grid-template-columns: 1fr
  }

  .v4-small-card {

    height: 190px
  }

  .v4-about-grid {

    grid-template-columns: 1fr
  }

  .v4-footer-inner {

    grid-template-columns: 1fr;

    gap: 14px;

    padding: 24px 0
  }

  .v4-footer {

    min-height: 150px
  }

}

@media(max-width:560px) {

  .v4-shell {

    width: calc(100% - 36px)
  }

  .v4-header {

    height: 62px
  }

  .v4-links {

    top: 62px
  }

  .v4-brand {

    font-size: 26px
  }

  .v4-hero {

    height: 650px
  }

  .v4-hero-inner {

    padding-top: 74px
  }

  .v4-eyebrow {

    font-size: 9px;

    letter-spacing: .2em
  }

  .v4-hero h1 {

    font-size: 62px
  }

  .v4-hero h2 {

    font-size: 29px;

    line-height: 1.22
  }

  .v4-hero p {

    font-size: 16px;

    line-height: 1.55
  }

  .v4-primary {

    height: 50px
  }

  .v4-tags {

    font-size: 7px;

    white-space: normal;

    flex-wrap: wrap;

    max-width: 330px;

    line-height: 1.6
  }

  .v4-projects {

    padding-top: 24px
  }

  .v4-section-title {

    height: 48px
  }

  .v4-section-title h2 {

    font-size: 34px
  }

  .v4-section-title a {

    display: none
  }

  .v4-featured {

    height: 1100px;

    border-radius: 18px
  }

  .v4-featured-copy {

    padding: 30px 22px 0
  }

  .v4-app-icon {

    width: 86px;

    height: 86px;

    border-radius: 19px
  }

  .v4-featured h3 {

    font-size: 48px
  }

  .v4-featured h4 {

    font-size: 19px
  }

  .v4-featured-copy>p {

    font-size: 15px
  }

  .v4-actions {

    flex-direction: column;

    align-items: stretch
  }

  .v4-actions .v4-primary,

  .v4-store {

    width: 100%;

    margin: 0
  }

  .v4-feature-strip {

    width: 100%;

    grid-template-columns: 1fr;

    gap: 9px;

    margin-top: 24px
  }

  .v4-phone-stage {

    height: 500px
  }

  .v4-phone-overview {

    width: 205px;

    height: auto;

    aspect-ratio: 691 / 1421;

    left: 2%;

    top: 22px
  }

  .v4-phone-modules {

    width: 200px;

    height: auto;

    aspect-ratio: 691 / 1421;

    right: -5%;

    top: 42px
  }

  .v4-small-card {

    height: 265px;

    padding: 28px 24px
  }

  .v4-small-art {

    width: 70%;

    height: 70%;

    top: auto;

    bottom: 0;

    opacity: .66
  }

  .v4-small-card:after {

    background: linear-gradient(120deg, rgba(3, 12, 21, .98) 0%, rgba(3, 12, 21, .9) 45%, rgba(3, 12, 21, .35) 100%)
  }

  .v4-small-copy {

    width: 100%
  }

  .v4-small-head h3 {

    font-size: 27px
  }

  .v4-small-copy>p {

    font-size: 16px;

    max-width: 330px
  }

  .v4-arrow {
    font-size: 14px;
  }

  .v4-arrow span {
    font-size: 19px;
  }

  .v4-about {

    padding-top: 40px
  }

  .v4-about-title {

    height: 66px
  }

  .v4-about-title h2 {

    font-size: 39px
  }

  .v4-about-title span {

    display: none
  }

  .v4-info {

    min-height: 150px;

    padding: 20px
  }

  .v4-info h3 {

    font-size: 20px
  }

  .v4-info p {

    font-size: 15px
  }

  .v4-info-icon {

    width: 64px;

    height: 64px;

    flex-basis: 64px
  }

  .v4-footer-links {

    flex-wrap: wrap
  }

}

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

   OskinLab — новый hero: тёмная технологическая лаборатория

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

.v4-hero-art {

  width: 100%;

  right: 0;

  background:

    url("assets/oskinlab-lab.webp") center center / cover no-repeat;

  filter:

    saturate(.92) contrast(1.08) brightness(.82);

}

/* Затемнение под текстом слева + мягкий переход справа */

.v4-hero::after {

  content: "";

  position: absolute;

  inset: 0;

  background:

    linear-gradient(90deg,

      rgba(2, 9, 20, .98) 0%,

      rgba(2, 9, 20, .92) 25%,

      rgba(2, 9, 20, .67) 43%,

      rgba(2, 9, 20, .20) 61%,

      rgba(2, 9, 20, .06) 78%,

      rgba(2, 9, 20, .15) 100%),

    linear-gradient(180deg,

      rgba(2, 9, 20, .03) 0%,

      rgba(2, 9, 20, .10) 70%,

      rgba(2, 9, 20, .32) 100%);

  pointer-events: none;

}

/* Планшет / телефон */

@media (max-width: 900px) {

  .v4-hero-art {

    width: 100%;

    height: 50%;

    top: auto;

    bottom: 0;

    background-position: 63% center;

    filter:

      saturate(.92) contrast(1.08) brightness(.74);

  }

  .v4-hero::after {

    background:

      linear-gradient(180deg,

        #020914 0%,

        rgba(2, 9, 20, .99) 43%,

        rgba(2, 9, 20, .74) 60%,

        rgba(2, 9, 20, .18) 82%,

        rgba(2, 9, 20, .28) 100%);

  }

}

/* Иконка PROXYx */

.v4-small-icon.proxyx-icon {

  padding: 0;

  overflow: hidden;

  flex-shrink: 0;

}

.v4-small-icon.proxyx-icon img {

  display: block;

  width: 100%;

  height: 100%;

  object-fit: cover;

  border-radius: inherit;

}

@media (max-width: 560px) {

  .v4-hero-art {

    height: 46%;

    background-position: 66% center;

  }

}