:root {
  --ink: #0A0A0D;
  --ink2: #141419;
  --paper: #F3F0E8;
  --lime: #D6FF3D;
  --hot: #FF4A1C;
  --violet: #7B5CFF;
  --mute: #8A8A93;
  --line: rgba(255, 255, 255, .12);
  --disp: 'Unbounded', sans-serif;
  --body: 'Manrope', sans-serif;
  --mono: 'JetBrains Mono', monospace;
}

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

html {
  scroll-behavior: smooth
}

body {
  background: var(--ink);
  color: #fff;
  font-family: var(--body);
  font-size: 18px;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased
}

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

button,
input,
select {
  font: inherit
}

.wrap {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 40px
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 200;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--lime);
  color: var(--ink);
  font-weight: 800;
  transform: translateY(-160%);
  transition: transform .2s
}

.skip-link:focus {
  transform: translateY(0)
}

.disp {
  font-family: var(--disp);
  letter-spacing: -.03em;
  line-height: .92;
  text-transform: uppercase;
  margin: auto;
  text-align: center;
}

.mono {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border: 0;
  cursor: pointer;
  border-radius: 100px;
  font-weight: 800;
  padding: 20px 30px;
  font-size: 17px;
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), background .2s, color .2s
}

.btn:hover {
  transform: translateY(-3px)
}

.btn-lime {
  background: var(--lime);
  color: var(--ink)
}

.btn-lime:hover {
  background: #fff
}

.btn-ghost {
  background: transparent;
  color: #fff;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .25)
}

.btn-ghost:hover {
  box-shadow: inset 0 0 0 2px #fff
}

.btn .arr {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--lime);
  font-size: 15px;
  transition: transform .25s
}

.btn:hover .arr {
  transform: rotate(-45deg)
}

/* NAV */
nav {
  position: fixed;
  inset: 16px 16px auto;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px 12px 26px;
  border-radius: 100px;
  background: rgba(10, 10, 13, .6);
  backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid var(--line)
}

.logo {
  font-family: var(--disp);
  font-weight: 900;
  font-size: 19px;
  letter-spacing: -.02em;
  display: flex;
  align-items: center;
  gap: 10px;
  text-transform: uppercase
}

.logo .mark {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--lime);
  display: grid;
  place-items: center;
  color: var(--ink);
  font-size: 13px;
  box-shadow: 0 0 22px rgba(214, 255, 61, .5)
}

.nav-links {
  display: flex;
  gap: 28px;
  font-weight: 600;
  font-size: 15px;
  color: #cfcfd6
}

.nav-links a:hover {
  color: var(--lime)
}

.nav-r {
  display: flex;
  gap: 10px;
  align-items: center
}

.lang {
  display: flex;
  background: rgba(255, 255, 255, .08);
  border-radius: 100px;
  padding: 4px
}

.lang button,
.lang a {
  border: 0;
  background: none;
  color: #aaa;
  font-weight: 800;
  font-size: 13px;
  padding: 8px 12px;
  border-radius: 100px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  line-height: 1;
  transition: background .2s, color .2s;
}

.lang a:hover {
  color: #fff;
}

.lang button.on,
.lang a.on {
  background: #fff;
  color: var(--ink);
}

nav .btn {
  padding: 13px 22px;
  font-size: 15px
}

/* HERO */
.hero {
  position: relative;
  padding: 150px 0 70px;
  min-height: 100vh;
  overflow: hidden
}

.hero::before {
  content: "";
  position: absolute;
  width: 900px;
  height: 900px;
  right: -250px;
  top: -200px;
  background: radial-gradient(circle, rgba(123, 92, 255, .45), transparent 60%);
  filter: blur(30px);
  pointer-events: none
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse at 70% 30%, #000 10%, transparent 70%);
  opacity: .5;
  pointer-events: none
}

.hero .wrap {
  position: relative;
  z-index: 2
}

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 8px 8px;
  border-radius: 100px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--line);
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 36px
}

.kicker b {
  background: var(--hot);
  color: #fff;
  padding: 4px 10px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 800
}

.hero h1 {
  font-size: clamp(48px, 8.4vw, 110px);
  font-weight: 900
}

.hero h1 .row {
  display: block;
 /* overflow: hidden;*/
  padding-bottom: .4em;
  line-height: 1.0em;
}

.hero h1 .row>span {
  display: inline-block;
  transform: translateY(105%);
  animation: up 1s cubic-bezier(.2, .8, .2, 1) forwards
}

.hero h1 .row:nth-child(2)>span {
  animation-delay: .12s
}

.hero h1 .row:nth-child(3)>span {
  animation-delay: .24s
}

@keyframes up {
  to {
    transform: none
  }
}

.hl {
  background: var(--lime);
  color: var(--ink);
  padding: 0.12em;
  border-radius: .12em;
  display: inline-block;
  transform: rotate(-2deg)
}
.hl.orange {
  background: var(--hot);
  color: var(--paper);
  font-family: "Train One", system-ui;
  font-weight: 400;
  font-style: normal;
  font-size: 1.2em;
  padding-bottom: 0.17em;
  
}

.outline {
  color: transparent;
  -webkit-text-stroke: 2px #fff
}

.strike {
  position: relative;
  color: #55555e
}

.strike::after {
  content: "";
  position: absolute;
  left: -2%;
  right: -2%;
  top: 52%;
  height: .09em;
  background: var(--hot);
  transform: scaleX(0) rotate(-3deg);
  transform-origin: left;
  animation: strk .6s .9s cubic-bezier(.2, .8, .2, 1) forwards
}

@keyframes strk {
  to {
    transform: scaleX(1) rotate(-3deg)
  }
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 60px;
  margin-top: 56px;
  align-items: end
}

.hero p.lead {
  font-size: 22px;
  color: #c9c9d1;
  max-width: 540px;
  margin-bottom: 36px;
  text-wrap: pretty
}

.hero p.lead strong {
  color: #fff
}

.ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap
}

.hero-stats {
  display: flex;
  gap: 44px;
  margin-top: 52px;
  padding-top: 28px;
  border-top: 1px solid var(--line)
}

.hero-stats div b {
  display: block;
  font-family: var(--disp);
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--lime);
  font-variant-numeric: tabular-nums;
  white-space: nowrap
}

.hero-stats .stat-value {
  font: inherit;
  color: inherit;
  font-variant-numeric: tabular-nums
}

.hero-stats .stat-suffix {
  font-family: var(--body);
  font-size: .38em;
  font-weight: 800;
  letter-spacing: 0;
  vertical-align: baseline
}

.hero-stats .stat-label {
  display: block;
  font-size: 14px;
  color: var(--mute)
}

/* DASHBOARD MOCK */
.dash {
  position: relative;
  background: linear-gradient(160deg, #1b1b22, #101015);
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: 26px;
  box-shadow: 0 60px 120px -30px rgba(0, 0, 0, .8);
  transform: perspective(1400px) rotateY(-8deg) rotateX(4deg);
  transition: transform .6s
}

.dash:hover {
  transform: perspective(1400px) rotateY(0) rotateX(0)
}

.dash-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 22px
}

.dots {
  display: flex;
  gap: 6px
}

.dots i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #333
}

.dots i:first-child {
  background: var(--hot)
}

.live {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--lime)
}

.live::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lime);
  animation: pulse 1s infinite
}

@keyframes pulse {
  50% {
    opacity: .35
  }
}

.kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 18px
}

.kpi {
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px
}

.kpi small {
  font-size: 12px;
  color: var(--mute);
  display: block;
  margin-bottom: 6px
}

.kpi b {
  font-family: var(--disp);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.02em
}

.kpi em {
  font-style: normal;
  font-size: 12px;
  font-weight: 800;
  color: var(--lime);
  margin-left: 6px;
  white-space: nowrap
}

.chart {
  height: 210px;
  display: flex;
  align-items: flex-end;
  gap: 7px;
  padding: 44px 16px 16px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--line);
  border-radius: 16px;
  position: relative
}

.chart .bar {
  flex: 1;
  border-radius: 6px 6px 2px 2px;
  background: linear-gradient(to top, rgba(255, 255, 255, .08), rgba(255, 255, 255, .22));
  height: 0;
  transition: height 1.2s cubic-bezier(.2, .8, .2, 1)
}

.chart .bar.hot {
  background: linear-gradient(to top, rgba(214, 255, 61, .3), var(--lime))
}

.chart .divider {
  position: absolute;
  top: 36px;
  bottom: 12px;
  width: 0;
  border-left: 1.5px dashed var(--hot)
}

.chart .divider span {
  position: absolute;
  top: -24px;
  left: -4px;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 800;
  color: var(--hot);
  font-family: var(--mono);
  text-transform: uppercase
}

.chart-lbl {
  position: absolute;
  top: 14px;
  left: 16px;
  font-size: 12px;
  color: var(--mute)
}

.chip {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  color: var(--ink);
  padding: 12px 16px;
  border-radius: 16px;
  font-weight: 700;
  font-size: 14px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, .4);
  animation: float 5s ease-in-out infinite;
  z-index: 3
}

.chip .ic {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 14px
}

.chip.c1 {
  left: -50px;
  top: 56px
}

.chip.c1 .ic {
  background: var(--lime)
}

.chip.c2 {
  right: -24px;
  bottom: -26px;
  animation-delay: -2.5s;
  background: var(--hot);
  color: #fff
}

.chip.c2 .ic {
  background: rgba(255, 255, 255, .2)
}

@keyframes float {
  50% {
    transform: translateY(-12px)
  }
}

/* MARQUEE */
.marquee {
  background: var(--lime);
  color: var(--ink);
  padding: 26px 0;
  overflow: hidden;
  transform: rotate(-1.5deg);
  margin: 74px  -20px 0;
  position: relative;
  z-index: 3
}

.marquee.alt {
  background: var(--hot);
  color: #fff;
  transform: rotate(1.2deg);
  margin-top: -14px;
  z-index: 2
}

.track {
  display: flex;
  gap: 48px;
  white-space: nowrap;
  animation: mq 34s linear infinite;
  width: max-content
}

.marquee.alt .track {
  animation-direction: reverse
}

.track span {
  font-family: var(--disp);
  font-weight: 800;
  font-size: 38px;
  text-transform: uppercase;
  letter-spacing: -.02em;
  display: flex;
  align-items: center;
  gap: 48px
}

.track span::after {
  content: "✱";
  font-size: 30px
}

@keyframes mq {
  to {
    transform: translateX(-50%)
  }
}

/* SECTIONS */
section {
  position: relative
}

.sec {
  padding: 50px 0
}

.sec-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  margin-bottom: 70px
}

.sec-head h2 {
  font-size: clamp(42px, 6.2vw, 104px);
  font-weight: 900
}

.sec-head p {
  max-width: 420px;
  color: #b9b9c2;
  font-size: 19px;
  text-wrap: pretty
}

.tag {
  display: inline-block;
  color: var(--lime);
  margin-bottom: 22px
}

/* MONTH -> DAY */
.mtd {
  display: grid;
  grid-template-columns: .95fr 1.5fr;
  gap: 16px
}

.mtd-big {
  background: var(--lime);
  color: var(--ink);
  border-radius: 32px;
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 560px;
  position: relative;
  overflow: hidden
}

.mtd-big .x {
  font-family: var(--disp);
  font-weight: 900;
  font-size: clamp(80px, 8.6vw, 130px);
  line-height: .8;
  letter-spacing: -.06em;
  white-space: nowrap
}

.mtd-big h3 {
  font-family: var(--disp);
  font-size: 28px;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.05;
  letter-spacing: -.02em;
  margin-bottom: 12px
}

.mtd-big p {
  font-weight: 500;
  opacity: .8
}

.cal {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 5px;
  margin: 26px 0
}

.cal i {
  aspect-ratio: 1;
  border-radius: 5px;
  background: rgba(10, 10, 13, .12);
  transition: background .3s
}

.cal i.on {
  background: var(--ink)
}

.cal i.one {
  background: var(--hot)
}

.mtd-list {
  background: var(--ink2);
  border: 1px solid var(--line);
  border-radius: 32px;
  padding: 40px
}

.mtd-legend {
  display: flex;
  gap: 24px;
  margin-bottom: 28px;
  font-size: 14px;
  color: var(--mute);
  font-weight: 600
}

.mtd-legend span {
  display: flex;
  align-items: center;
  gap: 8px
}

.mtd-legend i {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  display: inline-block
}

.task {
  padding: 20px 0;
  border-top: 1px solid var(--line)
}

.task-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  margin-bottom: 12px
}

.task-top b {
  font-size: 19px;
  font-weight: 800
}

.task-top span {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--lime);
  white-space: nowrap
}

.tbar {
  height: 14px;
  border-radius: 7px;
  background: rgba(255, 255, 255, .05);
  position: relative;
  margin-bottom: 7px
}

.tbar i {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: 7px;
  width: 0;
  transition: width 1.6s cubic-bezier(.2, .8, .2, 1)
}

.tbar.before i {
  background: #3a3a44
}

.tbar.after i {
  background: var(--lime);
  box-shadow: 0 0 16px rgba(214, 255, 61, .5)
}

.tbar em {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
  color: var(--mute)
}

.tbar.after em {
  left: calc(var(--w) + 10px);
  right: auto;
  color: var(--lime)
}

/* BENTO */
.bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: minmax(300px, auto);
  gap: 16px
}

.card {
  position: relative;
  border-radius: 28px;
  padding: 36px;
  overflow: hidden;
  background: var(--ink2);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  transition: transform .4s cubic-bezier(.2, .8, .2, 1)
}

.card:hover {
  transform: translateY(-6px)
}

.card .num {
  font-family: var(--mono);
  font-size: 14px;
  opacity: .6;
  display: flex;
  justify-content: space-between
}

.card h3 {
  font-family: var(--disp);
  font-size: 28px;
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.02em;
  text-transform: uppercase;
  margin-bottom: 14px
}

.card p {
  font-size: 17px;
  opacity: .78;
  max-width: 460px;
  text-wrap: pretty
}

.card.big {
  grid-column: span 4
}

.card.sm {
  grid-column: span 2
}

.card.half {
  grid-column: span 3
}

.card.lime {
  background: var(--lime);
  color: var(--ink);
  border: 0
}

.card.hot {
  background: var(--hot);
  border: 0
}

.card.violet {
  background: var(--violet);
  border: 0
}

.card.paper {
  background: var(--paper);
  color: var(--ink);
  border: 0
}

.card .huge {
  font-family: var(--disp);
  font-weight: 900;
  font-size: 110px;
  line-height: .85;
  letter-spacing: -.05em
}

.card.big .row2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  align-items: end
}
.svg-img {
  width: 100%;
  margin: auto;
}
.svg-img img {
  width: 14%;
  text-align: center;
  
}
.svg-img svg path{
  fill: #fff;
}

.gen {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px
}

.gen i {
  aspect-ratio: 4/5;
  border-radius: 10px;
  background: rgba(255, 255, 255, .06);
  position: relative;
  overflow: hidden;
  opacity: 0;
  transform: scale(.8);
  transition: opacity .4s, transform .4s
}

.gen i.show {
  opacity: 1;
  transform: none
}

.gen i::before {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  top: 12%;
  height: 44%;
  border-radius: 6px;
  background: var(--c)
}

.gen i::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 30%;
  bottom: 16%;
  height: 8%;
  border-radius: 3px;
  background: rgba(255, 255, 255, .35);
  box-shadow: 0 -14px 0 -2px rgba(255, 255, 255, .15)
}

.integr {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px
}

.integr span {
  padding: 8px 14px;
  border-radius: 100px;
  background: rgba(10, 10, 13, .1);
  font-weight: 700;
  font-size: 14px
}

.ab {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px
}

.ab div {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 12px
}

.ab div s {
  flex: 1;
  height: 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .2);
  position: relative;
  text-decoration: none
}

.ab div s::after {
  content: "";
  position: absolute;
  inset: 0;
  width: var(--w);
  background: #fff;
  border-radius: 4px
}

/* TARGETING */
.tgt {
  background: var(--violet);
  border-radius: 48px;
  margin: 0 16px
}

.tgt .tag {
  color: var(--lime)
}

.tgt .sec-head p {
  color: rgba(255, 255, 255, .8)
}

.plat {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px
}

.pcard {
  background: rgba(10, 10, 13, .88);
  border-radius: 28px;
  padding: 34px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-height: 340px;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), background .3s
}

.pcard:hover {
  transform: translateY(-6px);
  background: var(--ink)
}

.pcard .ph {
  display: flex;
  justify-content: space-between;
  align-items: center
}

.pcard .pl {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  font-family: var(--disp);
  font-weight: 900;
  font-size: 18px;
  color: var(--ink)
}

.pcard .pm {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--mute)
}

.pcard h3 {
  font-family: var(--disp);
  font-size: 26px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.02em;
  line-height: 1.05
}

.pcard ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: #c4c4cc;
  font-size: 16px;
  flex: 1
}

.pcard li::before {
  content: "+ ";
  color: var(--lime);
  font-weight: 800
}

.pcard .metric {
  display: flex;
  justify-content: space-between;
  align-items: end;
  border-top: 1px solid var(--line);
  padding-top: 18px
}

.pcard .metric b {
  font-family: var(--disp);
  font-size: 34px;
  font-weight: 900;
  letter-spacing: -.03em;
  color: var(--lime);
  line-height: 1
}

.pcard .metric span {
  font-size: 13px;
  color: var(--mute);
  text-align: right;
  max-width: 140px
}

.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 16px
}

.step {
  background: var(--lime);
  color: var(--ink);
  border-radius: 24px;
  padding: 28px;
  position: relative
}

.step b {
  font-family: var(--disp);
  font-size: 44px;
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: 1;
  display: block;
  margin-bottom: 16px
}

.step h4 {
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 6px
}

.step p {
  font-size: 15px;
  opacity: .75
}

.step:not(:last-child)::after {
    content: "→";
    position: absolute;
    right: -24px;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--ink);
    color: var(--lime);
    display: grid;
    place-items: center;
    font-weight: 800;
    z-index: 2;
    font-size: 20px;
}
.ph {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Контейнер для иконки (взамен вашего старого .pl) */
.pl-logo {
  width: 48px;
  height: 48px;
  border-radius: 8px; /* или 50%, если нужен круг */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.pl-logo img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

/* CHARTS */
.charts {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px
}

.ch {
  background: var(--ink2);
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: 32px;
  position: relative
}

.ch.w4 {
  grid-column: span 4
}

.ch.w2 {
  grid-column: span 2
}

.ch.w3 {
  grid-column: span 3
}

.ch-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 24px;
  flex-wrap: wrap
}

.ch-head h3 {
  font-family: var(--disp);
  font-size: 22px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.01em;
  line-height: 1.1
}

.ch-head small {
  display: block;
  color: var(--mute);
  font-size: 14px;
  margin-top: 6px
}

.tabs {
  display: flex;
  background: rgba(255, 255, 255, .06);
  border-radius: 100px;
  padding: 4px
}

.tabs button {
  border: 0;
  background: none;
  color: #aaa;
  font-weight: 800;
  font-size: 13px;
  padding: 9px 16px;
  border-radius: 100px;
  cursor: pointer;
  transition: .2s
}

.tabs button.on {
  background: var(--lime);
  color: var(--ink)
}

.big-val {
  font-family: var(--disp);
  font-size: 56px;
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: 1;
  color: var(--lime)
}

.big-val small {
  font-size: 16px;
  color: var(--mute);
  letter-spacing: 0;
  font-family: var(--body);
  font-weight: 600;
  margin-left: 8px
}

svg text {
  font-family: var(--mono);
  font-size: 11px;
  fill: #6c6c76
}

.line-path {
  fill: none;
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round
}

.donut-wrap {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap
}

.donut-center {
  font-family: var(--disp);
  font-weight: 900;
  font-size: 30px;
  fill: #fff !important
}

.legend {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 15px;
  flex: 1;
  min-width: 150px
}

.legend div {
  display: flex;
  align-items: center;
  gap: 10px
}

.legend i {
  width: 12px;
  height: 12px;
  border-radius: 4px;
  flex: none
}

.legend b {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 13px
}

.hbars {
  display: flex;
  flex-direction: column;
  gap: 18px
}

.hb-row .hb-l {
  display: flex;
  justify-content: space-between;
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 8px
}

.hb-row .hb-l span {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--mute)
}

.hb-track {
  display: flex;
  gap: 4px;
  height: 26px
}

.hb-track i {
  border-radius: 6px;
  width: 0;
  transition: width 1.4s cubic-bezier(.2, .8, .2, 1)
}

.vbars {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  height: 220px;
  padding-top: 20px
}

.vbars .vb {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  height: 100%;
  justify-content: flex-end
}

.vbars .vb .pair {
  display: flex;
  gap: 4px;
  align-items: flex-end;
  width: 100%;
  height: 100%
}

.vbars .vb .pair i {
  flex: 1;
  border-radius: 6px 6px 2px 2px;
  height: 0;
  transition: height 1.4s cubic-bezier(.2, .8, .2, 1)
}

.vbars .vb span {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--mute)
}

/* CASES */
.cases {
  display: flex;
  flex-direction: column;
  gap: 16px
}

.case {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  border-radius: 32px;
  overflow: hidden;
  background: var(--ink2);
  border: 1px solid var(--line);
  min-height: 440px
}

.case:nth-child(even) {
  grid-template-columns: 1fr 1.05fr
}

.case:nth-child(even) .case-img {
  order: 2
}

.case-img {
  position: relative;
  background: repeating-linear-gradient(135deg, #1c1c23 0 14px, #18181e 14px 28px);
  display: grid;
  place-items: center;
  overflow: hidden
}

.case-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(.2, .8, .2, 1)
}

.case:hover .case-img img {
  transform: scale(1.06)
}

.case-img .ph {
  font-family: var(--mono);
  font-size: 12px;
  color: #666;
  text-transform: uppercase;
  letter-spacing: .1em;
  text-align: center;
  padding: 20px
}

.case-img .badge {
  position: absolute;
  left: 24px;
  top: 24px;
  background: var(--lime);
  color: var(--ink);
  font-weight: 800;
  font-size: 13px;
  padding: 8px 14px;
  border-radius: 100px;
  z-index: 2
}

.case-body {
  padding: 48px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 30px
}

.case-body h3 {
  font-family: var(--disp);
  font-size: 34px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.02em;
  line-height: 1
}

.case-body p {
  color: #b9b9c2;
  margin-top: 16px;
  text-wrap: pretty
}

.case-res {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  border-top: 1px solid var(--line);
  padding-top: 28px;
      text-align: center;
}

.case-res b {
  display: block;
  font-family: var(--disp);
  font-size: clamp(30px, 3.4vw, 41px);
  font-weight: 900;
  letter-spacing: -.04em;
  color: var(--lime);
  line-height: 1
}

.case:nth-child(2) .case-res b {
  color: var(--hot)
}

.case:nth-child(3) .case-res b {
  color: #A996FF
}

.case-res span {
  font-size: 14px;
  color: var(--mute)
}

/* REVIEWS */
.reviews {
  background: var(--paper);
  color: var(--ink);
  border-radius: 48px 48px 0 0
}

.reviews .sec-head p {
  color: #55555c
}

.reviews .tag {
  color: var(--hot)
}

.rev-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 16px
}

.rev {
  border-radius: 28px;
  padding: 36px;
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  min-height: 420px
}

.rev:first-child {
  background: var(--ink);
  color: #fff
}

.rev q {
  font-size: 21px;
  font-weight: 600;
  line-height: 1.4;
  quotes: none;
  text-wrap: pretty
}

.rev:first-child q {
  font-family: var(--disp);
  font-size: 32px;
  font-weight: 800;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: -.02em
}

.rev:first-child q em {
  font-style: normal;
  color: var(--lime)
}

.rev .qm {
  font-family: var(--disp);
  font-size: 90px;
  line-height: .5;
  font-weight: 900;
  color: var(--hot);
  height: 40px
}

.who {
  display: flex;
  align-items: center;
  gap: 14px
}

.ava {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--violet);
  display: grid;
  place-items: center;
  font-family: var(--disp);
  font-weight: 800;
  color: #fff;
  flex: none
}

.rev:nth-child(2) .ava {
  background: var(--hot)
}

.rev:nth-child(3) .ava {
  background: var(--lime);
  color: var(--ink)
}

.who b {
  display: block;
  font-size: 16px
}

.who span {
  font-size: 14px;
  opacity: .6
}

.stars {
  color: var(--hot);
  letter-spacing: 3px;
  font-size: 18px
}

/* FAQ */
.faq-sec {
  background: var(--paper);
  color: var(--ink);
  padding-top: 0
}

.faq-grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 80px;
  border-top: 2px solid var(--ink);
  padding-top: 80px
}

.faq-grid h2 {
  font-size: clamp(44px, 6vw, 96px);
  font-weight: 900;
  position: sticky;
  top: 120px
}

.faq-grid .tag {
  color: var(--hot)
}

.qa {
  border-bottom: 2px solid rgba(10, 10, 13, .12)
}

.qa button {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  padding: 30px 0;
  font-size: 24px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -.01em
}

.qa .pm {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--lime);
  display: grid;
  place-items: center;
  font-size: 24px;
  transition: transform .35s, background .3s
}

.qa.open .pm {
  transform: rotate(45deg);
  background: var(--hot);
  color: #fff
}

.qa .ans {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .4s cubic-bezier(.2, .8, .2, 1)
}

.qa.open .ans {
  grid-template-rows: 1fr
}

.qa .ans>div {
  overflow: hidden
}

.qa .ans p {
  padding: 0 80px 30px 0;
  color: #4a4a52;
  font-size: 18px;
  text-wrap: pretty
}

/* Replacements for presentation formerly attached directly in the HTML. */
.text-hot {
  color: var(--hot)
}

.text-lime {
  color: var(--lime)
}

.sec-flush {
  padding-top: 0
}

.huge-unit {
  font-size: .4em;
  letter-spacing: normal;
}

.card-title {
  margin-top: 20px
}

.card-title-spaced {
  margin-top: 24px
}

.ab-a {
  --w: 42%
}

.ab-b {
  --w: 88%
}

.ab-c {
  --w: 30%
}

.card-dark {
  background: linear-gradient(135deg, #1a1a22, #0f0f13)
}


.line-chart {
  width: 100%;
  height: auto;
  margin-top: 12px;
  overflow: visible
}

.mtd-legend-compact {
  margin: 0
}

.cta-shell {
  background: var(--paper);
  padding-bottom: 16px
}

.success-copy {
  color: #aaa
}

.map .mapnote {
  color: #666
}

.swatch-before {
  background: #3a3a44
}

.swatch-lime {
  background: var(--lime)
}

/* CTA */
.cta {
  background: var(--lime);
  color: var(--ink);
  border-radius: 48px;
  margin: 0 16px;
  padding: 110px 0;
  overflow: hidden;
  position: relative
}

.cta-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 70px;
  align-items: center
}

.cta h2 {
  font-size: clamp(50px, 7vw, 90px);
  font-weight: 900
}

.cta p {
  font-size: 21px;
  margin-top: 28px;
  max-width: 480px;
  font-weight: 500
}

.perks {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 36px;
  font-weight: 700
}

.perks span::before {
  content: "→ ";
  color: var(--hot)
}

form {
  background: var(--ink);
  color: #fff;
  border-radius: 32px;
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 40px 80px -20px rgba(0, 0, 0, .4)
}

form h4 {
  font-family: var(--disp);
  font-size: 24px;
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 8px
}

.field input {
  width: 100%;
  background: rgba(255, 255, 255, .06);
  border: 1.5px solid var(--line);
  color: #fff;
  border-radius: 16px;
  padding: 20px;
  font-size: 17px;
  outline: none;
  transition: border-color .2s;
  appearance: none
}

.field input:focus {
  border-color: var(--lime)
}

.field input::placeholder {
  color: #777
}

.seg {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px
}

.seg label {
  cursor: pointer
}

.seg input {
  display: none
}

.seg span {
  display: block;
  text-align: center;
  padding: 14px 6px;
  border-radius: 14px;
  border: 1.5px solid var(--line);
  font-weight: 700;
  font-size: 15px;
  transition: .2s
}

.seg input:checked+span {
  background: var(--lime);
  color: var(--ink);
  border-color: var(--lime)
}

.seg-lbl {
  font-size: 14px;
  color: var(--mute);
  margin-top: 4px
}

form .btn {
  justify-content: center;
  margin-top: 8px;
  padding: 22px
}

.consent {
  font-size: 13px;
  color: var(--mute);
  text-align: center
}

.consent a {
  color: var(--lime);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity .2s;
}

.consent a:hover {
  opacity: .8;
}

.form-result {
  display: none;
  padding: 36px 10px 16px;
  text-align: center
}

.form-result .big {
  font-family: var(--disp);
  font-size: 72px;
  font-weight: 900;
  line-height: 1;
  color: var(--lime)
}

.form-result h4 {
  margin: 20px 0 10px
}

.form-result p {
  color: #aaa
}

.form-error .big {
  color: var(--hot)
}

form.sent>*:not(.success),
form.sent .form-error {
  display: none
}

form.sent .success,
form.failed .form-error {
  display: block
}

form.sending button[type="submit"] {
  opacity: .65;
  pointer-events: none
}

/* CONTACTS */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 16px
}

.cinfo {
  display: flex;
  flex-direction: column;
  gap: 16px
}

.cbox {
  background: var(--ink2);
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: 32px;
  transition: background .3s, color .3s;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px
}

.cbox:hover {
  background: var(--lime);
  color: var(--ink)
}

.cbox:hover small {
  color: var(--ink)
}

.cbox small {
  display: block;
  color: var(--mute)
}

.cbox a,
.cbox div {
  font-family: var(--disp);
  font-size: clamp(20px, 2vw, 30px);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.15;
  word-break: break-word
}

.cbox .addr {
  font-size: clamp(18px, 1.6vw, 24px);
  text-transform: uppercase
}

.map {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  min-height: 520px;
  background: #121217;
  border: 1px solid var(--line)
}

.map .streets {
  position: absolute;
  inset: -20%;
  transform: rotate(-24deg);
  background:
    linear-gradient(90deg, transparent 49.5%, rgba(255, 255, 255, .14) 49.5% 50.5%, transparent 50.5%) 0 0/180px 100%,
    linear-gradient(transparent 49.5%, rgba(255, 255, 255, .14) 49.5% 50.5%, transparent 50.5%) 0 0/100% 140px,
    linear-gradient(90deg, transparent 49.8%, rgba(255, 255, 255, .06) 49.8% 50.2%, transparent 50.2%) 0 0/45px 100%,
    linear-gradient(transparent 49.8%, rgba(255, 255, 255, .06) 49.8% 50.2%, transparent 50.2%) 0 0/100% 35px
}

.map .park {
  position: absolute;
  left: 14%;
  top: 16%;
  width: 160px;
  height: 120px;
  border-radius: 30px;
  background: rgba(214, 255, 61, .08);
  transform: rotate(-24deg)
}

.map .river {
  position: absolute;
  left: -10%;
  right: -10%;
  top: 72%;
  height: 60px;
  background: rgba(123, 92, 255, .25);
  transform: rotate(10deg);
  border-radius: 50%
}

.pin {
  position: absolute;
  left: 52%;
  top: 46%;
  transform: translate(-50%, -100%);
  display: flex;
  flex-direction: column;
  align-items: center
}

.pin .lbl {
  background: var(--lime);
  color: var(--ink);
  font-weight: 800;
  padding: 12px 18px;
  border-radius: 14px;
  white-space: nowrap;
  font-size: 15px;
  text-align: center;
  line-height: 1.3
}

.pin .lbl small {
  display: block;
  font-weight: 600;
  font-size: 12px;
  opacity: .7
}

.pin .stem {
  width: 2px;
  height: 30px;
  background: var(--lime)
}

.pin .dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 10px rgba(214, 255, 61, .2), 0 0 0 24px rgba(214, 255, 61, .08);
  animation: ring 2s infinite
}

@keyframes ring {
  50% {
    box-shadow: 0 0 0 16px rgba(214, 255, 61, .12), 0 0 0 34px rgba(214, 255, 61, .04)
  }
}

.map .mapnote {
  position: absolute;
  left: 20px;
  bottom: 20px
}

/* FOOTER */
footer {
  padding: 80px 0 30px;
  overflow: hidden
}

.foot-word {
  font-family: var(--disp);
  font-weight: 900;
  font-size: clamp(40px, 9.6vw, 142px);
  letter-spacing: -.06em;
  line-height: .82;
  text-transform: uppercase;
  background: linear-gradient(180deg, #fff 30%, rgba(255, 255, 255, .05));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  white-space: nowrap;
  text-align: center;
}

.foot-row {
  display: flex;
  justify-content: space-between;
  color: var(--mute);
  font-size: 14px;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
  gap: 16px
}

.foot-row a {
  color: var(--mute);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .2s;
}

.foot-row a:hover {
  color: var(--lime);
}

/* REVEAL */
.rv {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity .9s cubic-bezier(.2, .8, .2, 1), transform .9s cubic-bezier(.2, .8, .2, 1)
}

.rv.in {
  opacity: 1;
  transform: none
}

@media(max-width:1100px) {
  .nav-links {
    display: none
  }

  .hero-grid,
  .cta-grid,
  .faq-grid,
  .contact-grid,
  .case,
  .case:nth-child(even),
  .mtd {
    grid-template-columns: 1fr
  }

  .case:nth-child(even) .case-img {
    order: 0
  }

  .case-img {
    min-height: 300px
  }

  .rev-grid,
  .plat {
    grid-template-columns: 1fr
  }

  .steps {
    grid-template-columns: 1fr 1fr
  }

  .step::after {
    display: none
  }

  .bento .card,
  .charts .ch {
    grid-column: span 6 !important
  }

  .chip.c1 {
    left: 10px;
    top: -30px
  }

  .dash {
    transform: none
  }

  .sec-head {
    flex-direction: column;
    align-items: flex-start
  }

  .faq-grid h2 {
    position: static
  }
}

@media(max-width:640px) {
  .wrap {
    padding: 0 20px
  }
  .hero {
    padding: 98px 0 70px;
  }
  nav .btn {
    display: none
  }

  .hero-stats {
    gap: 24px
  }
  .card h3 {
    font-size: 22px;
  }
  .chart-lbl {
    top: 26px;
  }
  .hero-stats div b {
    font-size: 32px
  }
  .hl.orange {
    margin: 10px 0;
    transform: rotate(2deg)
  }
  .kpis {
    grid-template-columns: 1fr 1fr
  }
  .hero-grid {
    margin-top: 20px;
  }
  .track span {
    font-size: 24px;
  }
  .sec {
    padding: 20px 0
  }
  .case-res {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
  }
  .tgt {
    padding: 20px 0;
  }

  .card .huge {
    font-size: 80px
  }
  .case-body {
    padding: 15px;
  }
  .case-body h3 {
    font-size: 28px;
  }
  .case-res b {
    font-size: 28px;
  }
  .qa button {
    font-size: 19px
  }

  .qa .ans p {
    padding-right: 0
  }

  form {
    padding: 24px
  }

  .steps {
    grid-template-columns: 1fr
  }
  .step:not(:last-child)::after {
    content: "↓";
    position: absolute;
    right: 45%;
    top: 103%;
    transform: translateY(-54%);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--ink);
    color: var(--lime);
    display: grid;
    place-items: center;
    font-weight: 800;
    z-index: 2;
    font-size: 22px;
}

  .card.big .row2 {
    grid-template-columns: 1fr
  }
  .foot-word {
    font-size: 35px;
  }
}

/* POLICY PAGE */
.policy-page {
  padding: 130px 0 80px;
  min-height: 80vh;
}

.policy-card {
  background: var(--ink2);
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: 56px 64px;
  max-width: 980px;
  margin: 0 auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .4);
}

.policy-header {
  margin-bottom: 40px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--line);
}

.policy-header .tag {
  display: inline-block;
  color: var(--lime);
  margin-bottom: 14px;
}

.policy-title {
  font-family: var(--disp);
  font-size: clamp(17px, 4.2vw, 44px);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -.02em;
  text-transform: uppercase;
  margin-bottom: 18px;
  text-align: left;
}

.policy-meta {
  color: var(--mute);
  font-size: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.policy-content {
  font-size: 16px;
  line-height: 1.75;
  color: #cfcfd6;
}

.policy-content section {
  margin-bottom: 36px;
}

.policy-content h2 {
  font-family: var(--disp);
  font-size: 21px;
  font-weight: 800;
  color: #fff;
  margin: 36px 0 16px;
  letter-spacing: -.01em;
}

.policy-content h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--paper);
  margin: 22px 0 10px;
}

.policy-content p {
  margin-bottom: 16px;
}

.policy-content ul,
.policy-content ol {
  margin: 0 0 20px 24px;
}

.policy-content li {
  margin-bottom: 8px;
}

.policy-content strong {
  color: #fff;
  font-weight: 700;
}

.policy-content a {
  color: var(--lime);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity .2s;
}

.policy-content a:hover {
  opacity: .8;
}

.policy-info-box {
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px 28px;
  margin: 24px 0;
}

.policy-info-box p {
  margin-bottom: 10px;
}

.policy-info-box p:last-child {
  margin-bottom: 0;
}

@media (max-width: 768px) {
  .policy-page {
    padding: 100px 0 60px;
  }
  .policy-card {
    padding: 28px 20px;
    border-radius: 20px;
  }
  .policy-content h2 {
    font-size: 18px;
  }
}