main {
  overflow:clip
}

.hero {
  height:clamp(430px,38vw,530px);
  position:relative;
  display:flex;
  align-items:center;
  padding-inline:14px;
  isolation:isolate
}

.hero-copy {
  position:relative;
  z-index:2;
  width:62%;
  padding-bottom:18px
}

.hero h1 {
  font-size:clamp(64px,6.7vw,90px);
  line-height:.98;
  letter-spacing:-.052em
}

.hero-dot {
  color:var(--accent)
}

.hero-copy>p {
  font-size:clamp(18px,1.65vw,23px);
  line-height:1.4;
  letter-spacing:.7px;
  color:#505861;
  margin-top:23px
}

.hero-actions {
  display:flex;
  align-items:center;
  gap:32px;
  margin-top:28px
}

.hero-art.odnova-mandala {
  position:absolute;
  z-index:0;
  right:-6px;
  top:-8px;
  width:44%;
  height:100%;
  min-height:0;
  padding:0;
  background:none;
  pointer-events:none;
  overflow:clip;
  --ink:var(--accent);
  --dot:#e57550;
  mask-image:linear-gradient(to bottom,#000 66%,transparent 98%)
}

.hero-art .stage {
  width:100%;
  max-width:480px;
  margin:0 auto
}

.hero-art::after {
  content:'';
  position:absolute;
  inset:65% -2px 0;
  background:linear-gradient(transparent,#fcfaf6 90%);
  pointer-events:none
}

.facts {
  display:grid;
  grid-template-columns:1.15fr .84fr 1fr;
  padding:12px 25px 28px;
  border-bottom:1px solid var(--line);
  position:relative;
  z-index:2
}

.fact {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:22px;
  position:relative
}

.fact:not(:last-child)::after {
  content:'';
  position:absolute;
  right:0;
  height:32px;
  width:1px;
  background:#b9bbb7
}

.fact .odnova-icon {
  width:40px;
  height:40px
}

.fact-value {
  font:20px/1.2 var(--serif);
  letter-spacing:-.5px
}

.fact-label {
  font-size:10px;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:#68717c;
  margin-top:6px
}

.experience {
  padding-top:35px;
  padding-bottom:48px
}

.eyebrow {
  display:flex;
  align-items:center;
  gap:14px;
  text-transform:uppercase;
  color:var(--accent);
  font-size:15px;
  letter-spacing:2.7px;
  margin-inline:18px
}

.eyebrow::after {
  content:'';
  width:46px;
  height:1px;
  background:var(--accent)
}

.experience-content {
  position:relative;
  min-height:560px
}

.orbit-art.odnova-orbit-scene {
  position:absolute;
  inset:65px 0;
  background:none;
  padding:0;
  display:grid;
  place-items:center;
  pointer-events:none
}

.orbit-art .odnova-orbits-stage {
  width:min(100%,1000px)
}

.orbit-art .odnova-orbits-title {
  font-size:clamp(72px,8.2vw,108px);
  color:var(--ink);
  letter-spacing:-.06em;
  line-height:.85
}

.odnova-orbits-title .statement-dot {
  color:var(--accent)
}

.features {
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr;
  min-height:560px;
  position:relative;
  pointer-events:none;
  padding:24px 18px 4px;
  gap:290px 40px
}

.feature {
  display:flex;
  gap:16px;
  align-items:flex-start;
  max-width:290px;
  pointer-events:auto;
  height:fit-content
}

.feature h3 {
  font-size:32px;
  line-height:1.08;
  letter-spacing:-1.2px;
  margin-bottom:6px
}

.feature p {
  font-size:15px;
  line-height:1.35;
  color:#6f777c
}

.feature .odnova-icon {
  width:70px;
  height:70px
}

.feature:nth-child(even) {
  justify-self:end
}

.feature:nth-child(n+3) {
  align-self:end
}

@media(min-width:1400px) {
  .experience-content,.features {
    min-height:640px
  }
  .features {
    gap:365px 40px
  }
  .feature {
    max-width:315px
  }
  .feature h3 {
    font-size:36px
  }
  .feature p {
    font-size:16px
  }
  .orbit-art .odnova-orbits-stage {
    width:min(100%,1100px)
  }
}

@media(min-width:701px) and (max-width:1100px) {
  .hero {
    height:365px;
    align-items:center
  }
  .hero-copy {
    width:78%;
    padding-bottom:12px
  }
  .hero h1 {
    font-size:clamp(49px,6.5vw,70px)
  }
  .hero-copy>p {
    max-width:470px;
    font-size:18px;
    letter-spacing:0
  }
  .hero-art.odnova-mandala {
    width:440px;
    right:-170px;
    top:0;
    mask-image:linear-gradient(to bottom,#000 65%,transparent 98%),linear-gradient(to right,transparent,#000 38%);
    mask-composite:intersect
  }
  .hero-actions {
    gap:24px;
    margin-top:24px
  }
  .hero-actions .button {
    font-size:16px;
    padding-inline:26px
  }
  .facts {
    padding:10px 0 24px
  }
  .fact {
    gap:14px
  }
  .fact-value {
    font-size:18px
  }
  .experience {
    padding-top:30px;
    padding-bottom:65px
  }
  .experience-content {
    min-height:0
  }
  .orbit-art.odnova-orbit-scene {
    position:relative;
    inset:auto;
    margin:0 auto;
    width:min(100%,760px)
  }
  .orbit-art .odnova-orbits-title {
    font-size:clamp(66px,9vw,90px)
  }
  .features {
    min-height:0;
    gap:26px 40px;
    padding:12px 18px 0;
    grid-template-rows:auto auto
  }
  .feature {
    max-width:none;
    width:100%;
    align-items:center
  }
  .feature:nth-child(n) {
    align-self:start;
    justify-self:start
  }
  .feature .odnova-icon {
    width:58px;
    height:58px
  }
  .feature h3 {
    font-size:29px
  }
  .feature p {
    font-size:15px
  }
}

@media(max-width:700px) {
  .hero {
    height:clamp(288px,65vw,435px);
    padding:0;
    align-items:flex-start
  }
  .hero-copy {
    padding:13px 0 0;
    width:85%
  }
  .hero h1 {
    font-size:clamp(36px,8.2vw,57px);
    line-height:.95;
    letter-spacing:-.047em;
    max-width:6.2em
  }
  .hero-copy>p {
    max-width:78%;
    letter-spacing:-.45px;
    font-size:clamp(15px,2.85vw,20px);
    line-height:1.25;
    margin-top:15px
  }
  .hero-actions {
    margin-top:18px;
    flex-direction:column;
    align-items:flex-start;
    gap:15px
  }
  .hero-art.odnova-mandala {
    width:66vw;
    right:calc(-40px - 23vw);
    top:8px;
    height:100%;
    mask-image:linear-gradient(to bottom,#000 53%,transparent 96%),linear-gradient(to right,transparent,#000 24%);
    mask-composite:intersect
  }
  .hero-art .stage {
    max-width:none
  }
  .hero-art::after {
    inset:55% 0 0
  }
  .facts {
    display:flex;
    flex-direction:column;
    padding:0 0 12px;
    gap:0
  }
  .fact {
    justify-content:flex-start;
    padding:10px 4px;
    gap:18px;
    min-height:58px
  }
  .fact:not(:last-child) {
    border-bottom:1px solid var(--line)
  }
  .fact:not(:last-child)::after {
    display:none
  }
  .fact .odnova-icon {
    width:32px;
    height:32px
  }
  .fact-value {
    font-size:clamp(17px,3.35vw,24px);
    letter-spacing:-.7px
  }
  .fact-label {
    font-size:10px;
    letter-spacing:.8px;
    margin-top:4px
  }
  .experience {
    width:calc(100% - 56px);
    padding-top:25px;
    padding-bottom:45px
  }
  .eyebrow {
    font-size:clamp(12px,2.75vw,19px);
    letter-spacing:2px;
    gap:12px;
    margin-inline:3px;
    white-space:nowrap
  }
  .eyebrow::after {
    width:31px
  }
  .experience-content {
    min-height:0
  }
  .orbit-art.odnova-orbit-scene {
    position:relative;
    inset:auto;
    margin:-1px -9px -10px
  }
  .orbit-art .odnova-orbits-title {
    font-size:clamp(43px,8.5vw,62px);
    line-height:.9;
    letter-spacing:-.055em
  }
  .features {
    display:flex;
    flex-direction:column;
    min-height:0;
    padding:0 10px;
    gap:0
  }
  .feature {
    max-width:none;
    gap:18px;
    align-items:center;
    padding:9px 3px;
    width:100%;
    min-height:70px
  }
  .feature:not(:last-child) {
    border-bottom:1px solid var(--line)
  }
  .feature .odnova-icon {
    width:46px;
    height:46px
  }
  .feature h3 {
    font-size:clamp(23px,4.5vw,32px);
    letter-spacing:-.8px;
    margin-bottom:3px
  }
  .feature p {
    font-size:clamp(14px,2.8vw,19px);
    line-height:1.22;
    letter-spacing:-.35px
  }
  .feature:nth-child(n) {
    align-self:auto
  }
}

@media(max-width:370px) {
  .container {
    width:calc(100% - 48px)
  }
  .hero-art.odnova-mandala {
    right:calc(-24px - 28vw)
  }
  .hero-copy {
    width:92%
  }
  .hero h1 {
    font-size:34px
  }
  .hero {
    height:288px
  }
  .feature {
    gap:12px
  }
  .feature .odnova-icon {
    width:45px;
    height:45px
  }
  .experience {
    width:calc(100% - 32px)
  }
  .eyebrow {
    letter-spacing:1.4px
  }
}

@media(min-width:1101px) {
  .hero {
    height:clamp(410px,33vw,475px)
  }
  .hero-copy {
    padding-bottom:0
  }
  .hero-art .stage {
    max-width:440px
  }
}