:root {
  --bg: #050505;
  --text: #ffffff;
  --muted: #b9b9bd;
  --red: #ff1515;
  --stroke: rgba(255, 255, 255, 0.12);
  --panel: rgba(255, 255, 255, 0.065);
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  margin: 0;
  font-family:
    Montserrat, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 21, 21, 0.13), transparent 28%),
    radial-gradient(circle at 12% 32%, rgba(255, 21, 21, 0.08), transparent 24%),
    radial-gradient(circle at 82% 68%, rgba(255, 21, 21, 0.075), transparent 26%),
    #030303;
  overflow-x: hidden;
}

body::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(rgba(255, 255, 255, 0.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.012) 1px, transparent 1px);
  background-size: 128px 128px;
  content: "";
  mask-image: radial-gradient(circle at 50% 42%, #000, transparent 76%);
  pointer-events: none;
}

section,
main {
  scroll-margin-top: 110px;
}

.hero,
.quick-facts,
.process,
.benefits,
.site-builder,
.packages,
.compare,
.guarantee,
.reviews,
.portfolio,
.final-cta {
  isolation: isolate;
}

.quick-facts::after,
.process::after,
.benefits::after,
.site-builder::after,
.packages::after,
.compare::after,
.guarantee::after,
.reviews::after,
.portfolio::after,
.final-cta::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  z-index: 0;
  height: 220px;
  background: linear-gradient(180deg, transparent, rgba(3, 3, 3, 0.82) 58%, #030303 100%);
  content: "";
  pointer-events: none;
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes header-drop {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-14px);
  }

  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

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

  50% {
    transform: translateY(calc(-50% - 10px)) rotate(-1.25deg);
  }
}

@keyframes pulse-red {
  0%,
  100% {
    box-shadow: 0 0 18px rgba(255, 21, 21, 0.75);
  }

  50% {
    box-shadow: 0 0 34px rgba(255, 21, 21, 0.95);
  }
}

@keyframes line-fill {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

@keyframes soft-glow {
  0%,
  100% {
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 0 0 rgba(255, 21, 21, 0);
  }

  50% {
    border-color: rgba(255, 21, 21, 0.34);
    box-shadow: 0 18px 44px rgba(255, 21, 21, 0.12);
  }
}

@keyframes progress-sweep {
  0%,
  100% {
    opacity: 0.64;
  }

  50% {
    opacity: 1;
  }
}

.site-header {
  position: fixed;
  z-index: 10;
  top: 18px;
  left: 50%;
  display: grid;
  width: min(1180px, calc(100% - 32px));
  min-height: 64px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 22px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 10px 12px 10px 20px;
  background: rgba(8, 8, 8, 0.76);
  backdrop-filter: blur(18px);
  box-shadow: 0 18px 55px rgba(0, 0, 0, 0.36);
  transform: translateX(-50%);
  animation: header-drop 650ms ease both;
}

.logo {
  color: #fff;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 0;
  text-decoration: none;
}

.logo::before {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 9px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 18px var(--red);
  content: "";
  animation: pulse-red 2200ms ease-in-out infinite;
}

.menu-toggle {
  display: none;
}

.nav {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.45vw, 20px);
}

.nav a {
  position: relative;
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 160ms ease;
  white-space: nowrap;
}

.nav a::after {
  position: absolute;
  right: 0;
  bottom: -8px;
  left: 0;
  height: 2px;
  background: var(--red);
  content: "";
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 180ms ease;
}

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

.nav a:hover::after {
  transform: scaleX(1);
}

.header-button {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  padding: 0 18px;
  background: var(--red);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
  text-transform: uppercase;
  box-shadow: 0 14px 30px rgba(255, 21, 21, 0.22);
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease;
  white-space: nowrap;
}

.header-button:hover {
  background: #ff3030;
  box-shadow: 0 18px 38px rgba(255, 21, 21, 0.34);
  transform: translateY(-2px);
}

.hero {
  position: relative;
  display: grid;
  min-height: 100vh;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.82fr);
  align-items: center;
  gap: clamp(28px, 4.8vw, 70px);
  overflow: hidden;
  padding: 104px clamp(28px, 5vw, 76px) 32px;
  background:
    radial-gradient(circle at 75% 28%, rgba(255, 21, 21, 0.24), transparent 28%),
    radial-gradient(circle at 15% 80%, rgba(255, 255, 255, 0.08), transparent 25%),
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    #050505;
  background-size:
    100% 100%,
    100% 100%,
    56px 56px,
    56px 56px,
    auto;
}

.hero::before {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.96), transparent 44%, rgba(0, 0, 0, 0.86)),
    linear-gradient(180deg, rgba(0, 0, 0, 0.9), transparent 42%, #050505);
  content: "";
  pointer-events: none;
}

.hero::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  z-index: 0;
  height: 160px;
  background: linear-gradient(180deg, transparent, #030303 84%);
  content: "";
  pointer-events: none;
}

.hero__copy,
.hero__visual {
  position: relative;
  z-index: 2;
  min-width: 0;
}

.hero__copy {
  animation: fade-up 760ms 120ms ease both;
}

.hero__visual {
  animation: fade-up 760ms 240ms ease both;
}

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  color: #f2f2f2;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
}

.kicker span {
  width: 42px;
  height: 2px;
  background: var(--red);
  box-shadow: 0 0 18px var(--red);
  transform-origin: left;
  animation: line-fill 720ms 260ms ease both;
}

h1 {
  max-width: 780px;
  margin: 0;
  font-size: clamp(44px, 6.2vw, 86px);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 0.93;
}

.lead {
  max-width: 650px;
  margin: 20px 0 0;
  color: var(--muted);
  font-size: clamp(16px, 1.5vw, 20px);
  font-weight: 500;
  line-height: 1.55;
}

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

.button {
  display: inline-flex;
  min-height: 58px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  padding: 0 28px;
  background: var(--red);
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 16px;
  font-weight: 900;
  box-shadow: 0 22px 45px rgba(255, 21, 21, 0.28);
  transition:
    transform 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease;
}

.button:hover {
  background: #ff3030;
  box-shadow: 0 26px 58px rgba(255, 21, 21, 0.38);
  transform: translateY(-2px);
}

.time {
  display: flex;
  min-height: 58px;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--stroke);
  border-radius: 8px;
  padding: 0 18px;
  background: var(--panel);
  transition:
    border-color 180ms ease,
    transform 180ms ease,
    background 180ms ease;
  animation: fade-up 650ms 220ms ease both;
}

.time:hover {
  border-color: rgba(255, 21, 21, 0.42);
  background: rgba(255, 21, 21, 0.08);
  transform: translateY(-2px);
}

.time strong {
  color: var(--red);
  font-size: 24px;
  font-weight: 900;
}

.time span {
  max-width: 120px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  text-transform: uppercase;
}

.stats {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(4, minmax(132px, 1fr));
  gap: 10px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}

.stats li {
  display: grid;
  min-height: 120px;
  align-content: start;
  gap: 8px;
  border: 1px solid var(--stroke);
  border-top-color: rgba(255, 21, 21, 0.45);
  border-radius: 12px;
  padding: 15px 14px;
  background:
    linear-gradient(180deg, rgba(255, 21, 21, 0.08), transparent 46%),
    rgba(255, 255, 255, 0.04);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  animation: fade-up 650ms ease both;
  transition:
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.stats li:hover {
  border-color: rgba(255, 21, 21, 0.5);
  background:
    linear-gradient(180deg, rgba(255, 21, 21, 0.14), transparent 52%),
    rgba(255, 255, 255, 0.06);
  box-shadow: 0 22px 54px rgba(255, 21, 21, 0.14);
  transform: translateY(-6px);
}

.stats li:nth-child(1) {
  animation-delay: 260ms;
}

.stats li:nth-child(2) {
  animation-delay: 340ms;
}

.stats li:nth-child(3) {
  animation-delay: 420ms;
}

.stats li:nth-child(4) {
  animation-delay: 500ms;
}

.stats strong {
  color: #fff;
  font-size: 27px;
  font-weight: 900;
  line-height: 1;
}

.stats span {
  color: #fff;
  line-height: 1.2;
}

.stats small {
  color: rgba(255, 255, 255, 0.58);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
  text-transform: none;
}

.hero__visual {
  min-height: 462px;
}

.browser {
  position: absolute;
  right: 0;
  top: 50%;
  width: min(480px, 100%);
  overflow: hidden;
  border: 1px solid var(--stroke);
  border-radius: 18px;
  background: rgba(12, 12, 12, 0.9);
  box-shadow:
    0 35px 100px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(255, 255, 255, 0.04);
  transform: translateY(-50%) rotate(-2deg);
  animation: float-card 5200ms ease-in-out infinite;
}

.browser__top {
  display: flex;
  gap: 7px;
  border-bottom: 1px solid var(--stroke);
  padding: 16px;
  background: rgba(255, 255, 255, 0.055);
}

.browser__top span {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  animation: progress-sweep 2400ms ease-in-out infinite;
}

.browser__top span:first-child {
  background: var(--red);
}

.browser__body {
  padding: 18px;
}

.mini-hero {
  display: flex;
  min-height: 172px;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  border-radius: 12px;
  padding: 19px;
  background:
    linear-gradient(135deg, rgba(255, 21, 21, 0.22), transparent 52%),
    rgba(255, 255, 255, 0.055);
  animation: soft-glow 4600ms ease-in-out infinite;
  transition: transform 180ms ease;
}

.mini-hero:hover {
  transform: translateY(-3px);
}

.mini-tag {
  color: var(--red);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.mini-hero h2 {
  max-width: 310px;
  margin: 8px 0 0;
  font-size: 29px;
  line-height: 1.02;
}

.mini-hero p {
  max-width: 300px;
  margin: 9px 0 0;
  color: rgba(255, 255, 255, 0.64);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}

.progress {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.progress span {
  display: block;
  width: var(--w);
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  transform-origin: left;
  animation: line-fill 900ms ease both;
}

.progress span:first-child {
  background: var(--red);
}

.progress span:nth-child(2) {
  animation-delay: 160ms;
}

.progress span:nth-child(3) {
  animation-delay: 280ms;
}

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

.cards article {
  min-height: 88px;
  border: 1px solid var(--stroke);
  border-radius: 10px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.045);
  transition:
    border-color 180ms ease,
    background 180ms ease,
    transform 180ms ease;
}

.cards article:hover {
  border-color: rgba(255, 21, 21, 0.44);
  background: rgba(255, 21, 21, 0.07);
  transform: translateY(-5px);
}

.cards span {
  color: var(--red);
  font-size: 12px;
  font-weight: 900;
}

.cards strong {
  display: block;
  margin-top: 22px;
  font-size: 14px;
  text-transform: uppercase;
}

@media (max-width: 1120px) {
  .site-header {
    gap: 14px;
    padding-left: 16px;
  }

  .hero {
    padding-top: 132px;
  }

  .nav {
    gap: 12px;
  }

  .nav a {
    font-size: 11px;
  }

  .header-button {
    min-height: 40px;
    padding: 0 14px;
    font-size: 11px;
  }
}

@media (max-width: 980px) {
  .site-header {
    position: fixed;
  }

  .hero {
    grid-template-columns: 1fr;
    align-items: start;
    min-height: auto;
    overflow: visible;
    padding: 142px 18px 34px;
  }

  .hero__copy {
    text-align: center;
  }

  .kicker,
  .actions {
    justify-content: center;
  }

  .lead {
    margin-right: auto;
    margin-left: auto;
  }

  .hero__visual {
    display: grid;
    min-height: auto;
    place-items: center;
    padding: 72px 0 22px;
  }

  .browser {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    width: min(520px, calc(100vw - 36px));
    transform: rotate(-1deg);
    animation: none;
  }

}

@media (max-width: 820px) {
  .site-header {
    top: 10px;
    width: calc(100% - 20px);
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 12px;
    overflow: visible;
  }

  .logo {
    font-size: 18px;
    min-width: 0;
  }

  .menu-toggle {
    position: relative;
    display: inline-grid;
    width: 44px;
    height: 40px;
    place-items: center;
    align-content: center;
    gap: 4px;
    border: 0;
    border-radius: 8px;
    background: var(--red);
    box-shadow: 0 14px 30px rgba(255, 21, 21, 0.24);
    cursor: pointer;
  }

  .menu-toggle span {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: #fff;
    transition:
      transform 180ms ease,
      opacity 180ms ease;
  }

  .site-header.is-menu-open .menu-toggle span:first-child {
    transform: translateY(6px) rotate(45deg);
  }

  .site-header.is-menu-open .menu-toggle span:nth-child(2) {
    opacity: 0;
  }

  .site-header.is-menu-open .menu-toggle span:last-child {
    transform: translateY(-6px) rotate(-45deg);
  }

  .header-button {
    display: none;
    grid-column: 1 / -1;
    justify-self: stretch;
    width: 100%;
    min-height: 48px;
    margin-top: 2px;
    padding: 0 18px;
    font-size: 12px;
  }

  .nav {
    display: none;
    grid-column: 1 / -1;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 8px 0 0;
  }

  .nav a {
    display: flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.035);
    font-size: 11px;
  }

  .nav a::after {
    display: none;
  }

  .site-header.is-menu-open .nav,
  .site-header.is-menu-open .header-button {
    display: flex;
  }

  .hero__visual {
    display: none;
  }

  .quick-facts {
    display: none;
  }
}

@media (hover: none) and (pointer: coarse) {
  .hero__visual,
  .quick-facts {
    display: none;
  }
}

@media (max-width: 620px) {

  h1 {
    font-size: clamp(34px, 11vw, 46px);
    line-height: 1;
  }

  .lead {
    font-size: 16px;
  }

  .actions,
  .stats {
    width: 100%;
  }

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

  .button,
  .time {
    width: 100%;
    max-width: 360px;
    margin-right: auto;
    margin-left: auto;
  }

  .time {
    justify-content: center;
  }

  .mini-hero {
    min-height: 190px;
    align-items: flex-start;
    flex-direction: column;
  }

  .mini-hero h2 {
    font-size: 28px;
  }

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

  .cards article {
    min-height: 68px;
  }

  .cards strong {
    margin-top: 18px;
  }
}

@media (max-width: 460px) {
  .stats {
    grid-template-columns: 1fr;
  }
}

.quick-facts {
  position: relative;
  overflow: hidden;
  padding: clamp(42px, 6vw, 74px) clamp(18px, 5vw, 72px);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 21, 21, 0.16), transparent 35%),
    linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    #030303;
  background-size:
    100% 100%,
    56px 56px,
    56px 56px,
    auto;
}

.quick-facts::before {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5, 5, 5, 0.58), transparent 30%, rgba(3, 3, 3, 0.48));
  content: "";
  pointer-events: none;
}

.quick-facts__inner {
  position: relative;
  z-index: 2;
  display: grid;
  min-width: 0;
  width: min(1120px, 100%);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin: 0 auto;
}

.fact-card {
  position: relative;
  display: grid;
  min-height: 154px;
  align-content: center;
  justify-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 22px 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), transparent),
    rgba(255, 255, 255, 0.035);
  text-align: center;
  animation: fade-up 650ms ease both;
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease,
    background 180ms ease;
}

.fact-card::before {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(255, 21, 21, 0.16), transparent 48%);
  content: "";
  opacity: 0;
  transition: opacity 180ms ease;
}

.fact-card:hover {
  border-color: rgba(255, 21, 21, 0.42);
  background:
    linear-gradient(180deg, rgba(255, 21, 21, 0.09), transparent),
    rgba(255, 255, 255, 0.05);
  box-shadow: 0 28px 70px rgba(255, 21, 21, 0.13);
  transform: translateY(-7px);
}

.fact-card:hover::before {
  opacity: 1;
}

.fact-card:nth-child(2) {
  animation-delay: 120ms;
}

.fact-card:nth-child(3) {
  animation-delay: 240ms;
}

.fact-card:nth-child(4) {
  animation-delay: 360ms;
}

.fact-card--accent {
  border-color: rgba(255, 21, 21, 0.4);
}

.fact-card__label {
  position: relative;
  z-index: 2;
  margin-bottom: 10px;
  color: var(--red);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.fact-card strong {
  position: relative;
  z-index: 2;
  color: #fff;
  font-size: clamp(36px, 3.8vw, 48px);
  font-weight: 900;
  line-height: 0.9;
}

.fact-card strong span {
  margin-left: 3px;
  color: var(--red);
  font-size: 20px;
}

.fact-card p {
  position: relative;
  z-index: 2;
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 16px;
  font-weight: 600;
}

@media (max-width: 920px) {
  .quick-facts__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .quick-facts__inner {
    grid-template-columns: 1fr;
  }
}

.process {
  position: relative;
  overflow: hidden;
  padding: clamp(52px, 7vw, 88px) clamp(18px, 5vw, 72px);
  background:
    radial-gradient(circle at 16% 10%, rgba(255, 21, 21, 0.13), transparent 25%),
    radial-gradient(circle at 76% 84%, rgba(255, 21, 21, 0.08), transparent 28%),
    #030303;
  text-align: center;
}

.process::before {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
  background-size: 96px 96px;
  content: "";
  mask-image: linear-gradient(180deg, transparent, #000 18%, #000 78%, transparent);
  pointer-events: none;
}

.section-heading {
  position: relative;
  z-index: 2;
  width: min(760px, 100%);
  margin: 0 auto;
  text-align: center;
  animation: fade-up 700ms ease both;
}

.section-heading span {
  color: var(--red);
  font-size: 14px;
  font-weight: 900;
  text-transform: uppercase;
}

.section-heading h2 {
  margin: 14px 0 0;
  color: #fff;
  font-size: clamp(38px, 5vw, 64px);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 0.95;
}

.section-heading p {
  max-width: 680px;
  margin: 18px auto 0;
  color: var(--muted);
  font-size: clamp(16px, 1.5vw, 19px);
  font-weight: 500;
  line-height: 1.55;
}

.process__grid {
  position: relative;
  z-index: 2;
  display: grid;
  min-width: 0;
  width: min(1280px, 100%);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin: clamp(46px, 6vw, 76px) auto 0;
  text-align: center;
}

.process-card {
  position: relative;
  display: grid;
  min-height: 360px;
  align-content: start;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 20px;
  padding: 24px;
  background:
    radial-gradient(circle at 16% 50%, rgba(255, 21, 21, 0.1), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 58%),
    rgba(255, 255, 255, 0.035);
  animation: fade-up 700ms ease both;
  transition:
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.process-card::before {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 21, 21, 0.18), transparent);
  content: "";
  opacity: 0;
  transition: opacity 180ms ease;
}

.process-card:nth-child(2) {
  animation-delay: 150ms;
}

.process-card:nth-child(3) {
  animation-delay: 300ms;
}

.process-card:hover {
  border-color: rgba(255, 21, 21, 0.42);
  background:
    radial-gradient(circle at 16% 50%, rgba(255, 21, 21, 0.16), transparent 30%),
    linear-gradient(180deg, rgba(255, 21, 21, 0.08), transparent 58%),
    rgba(255, 255, 255, 0.052);
  box-shadow: 0 28px 72px rgba(255, 21, 21, 0.12);
  transform: translateY(-8px);
}

.process-card:hover::before {
  opacity: 1;
}

.process-card--main {
  border-color: rgba(255, 21, 21, 0.46);
}

.process-card__top,
.process-card__icon,
.process-card h3,
.process-card p {
  position: relative;
  z-index: 2;
}

.process-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 44px;
}

.process-card__number {
  color: rgba(255, 255, 255, 0.42);
  font-size: 16px;
  font-weight: 900;
}

.process-card__time {
  border-radius: 999px;
  padding: 10px 16px;
  background: rgba(255, 21, 21, 0.12);
  color: var(--red);
  font-size: 15px;
  font-weight: 900;
  text-transform: uppercase;
}

.process-card__icon {
  display: grid;
  width: 82px;
  height: 82px;
  place-items: center;
  margin: 0 auto;
  border: 1px solid rgba(255, 21, 21, 0.36);
  border-radius: 50%;
  background: rgba(255, 21, 21, 0.08);
  transition:
    background 180ms ease,
    transform 180ms ease;
}

.process-card:hover .process-card__icon {
  background: rgba(255, 21, 21, 0.14);
  transform: scale(1.05);
}

.process-card__icon svg {
  width: 32px;
  height: 32px;
  color: var(--red);
  stroke-width: 2.4;
}

.process-card h3 {
  margin: 42px 0 0;
  color: #fff;
  font-size: clamp(23px, 2.2vw, 30px);
  font-weight: 900;
  line-height: 1.02;
  text-align: center;
}

.process-card p {
  max-width: 260px;
  margin: 18px auto 0;
  color: var(--muted);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.48;
  text-align: center;
}

@media (max-width: 900px) {
  .process__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .process-card {
    min-height: 320px;
  }
}

@media (max-width: 520px) {
  .process__grid {
    grid-template-columns: 1fr;
  }

  .process-card {
    min-height: auto;
    padding: 22px;
  }

  .process-card__top {
    margin-bottom: 28px;
  }

}

.benefits {
  position: relative;
  overflow: hidden;
  padding: clamp(52px, 7vw, 88px) clamp(18px, 5vw, 72px);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 21, 21, 0.12), transparent 32%),
    radial-gradient(circle at 9% 80%, rgba(255, 255, 255, 0.055), transparent 24%),
    #030303;
}

.benefits::before {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
  background-size: 96px 96px;
  content: "";
  mask-image: linear-gradient(180deg, transparent, #000 14%, #000 82%, transparent);
  pointer-events: none;
}

.benefits__grid {
  position: relative;
  z-index: 2;
  display: grid;
  min-width: 0;
  width: min(1180px, 100%);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: clamp(34px, 5vw, 54px) auto 0;
}

.benefit-card {
  position: relative;
  min-height: 210px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 24px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), transparent 58%),
    rgba(255, 255, 255, 0.035);
  animation: fade-up 700ms ease both;
  transition:
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.benefit-card::before {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 22% 0%, rgba(255, 21, 21, 0.16), transparent 42%);
  content: "";
  opacity: 0;
  transition: opacity 180ms ease;
}

.benefit-card:nth-child(2) {
  animation-delay: 90ms;
}

.benefit-card:nth-child(3) {
  animation-delay: 180ms;
}

.benefit-card:nth-child(4) {
  animation-delay: 270ms;
}

.benefit-card:nth-child(5) {
  animation-delay: 360ms;
}

.benefit-card:nth-child(6) {
  animation-delay: 450ms;
}

.benefit-card:hover {
  border-color: rgba(255, 21, 21, 0.42);
  background:
    linear-gradient(180deg, rgba(255, 21, 21, 0.09), transparent 58%),
    rgba(255, 255, 255, 0.052);
  box-shadow: 0 26px 70px rgba(255, 21, 21, 0.12);
  transform: translateY(-7px);
}

.benefit-card:hover::before {
  opacity: 1;
}

.benefit-card--accent {
  border-color: rgba(255, 21, 21, 0.42);
}

.benefit-card__icon,
.benefit-card h3,
.benefit-card p {
  position: relative;
  z-index: 2;
}

.benefit-card__icon {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid rgba(255, 21, 21, 0.34);
  border-radius: 12px;
  background: rgba(255, 21, 21, 0.08);
  transition:
    background 180ms ease,
    transform 180ms ease;
}

.benefit-card:hover .benefit-card__icon {
  background: rgba(255, 21, 21, 0.14);
  transform: rotate(-4deg) scale(1.05);
}

.benefit-card__icon svg {
  width: 23px;
  height: 23px;
  color: var(--red);
  stroke-width: 2.35;
}

.benefit-card h3 {
  margin: 22px 0 0;
  color: #fff;
  font-size: clamp(19px, 1.7vw, 23px);
  font-weight: 900;
  line-height: 1.1;
}

.benefit-card p {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.55;
}

@media (max-width: 1020px) {
  .benefits__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .benefits__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .benefit-card {
    min-height: auto;
    padding: 20px;
  }

  .benefit-card h3 {
    margin-top: 18px;
  }

  .benefit-card p {
    font-size: 14px;
  }
}

.site-builder {
  position: relative;
  overflow: hidden;
  padding: clamp(56px, 8vw, 98px) clamp(18px, 5vw, 72px);
  background:
    radial-gradient(circle at 50% 8%, rgba(255, 21, 21, 0.14), transparent 34%),
    radial-gradient(circle at 12% 70%, rgba(255, 21, 21, 0.06), transparent 28%),
    #030303;
}

.site-builder::before {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.014) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.014) 1px, transparent 1px);
  background-size: 96px 96px;
  content: "";
  mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
  pointer-events: none;
}

.site-builder::after {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 21, 21, 0.08), transparent 18%),
    radial-gradient(circle at 82% 72%, rgba(255, 21, 21, 0.055), transparent 20%);
  content: "";
  opacity: 0.8;
  pointer-events: none;
  animation: builder-ambient 9s ease-in-out infinite alternate;
}

.builder-hero,
.builder-steps,
.builder-progress,
.builder-panel {
  position: relative;
  z-index: 2;
}

.builder-hero {
  width: min(980px, 100%);
  margin: 0 auto;
  text-align: center;
  animation: builder-rise 720ms ease both;
}

.builder-badge {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(255, 21, 21, 0.42);
  border-radius: 999px;
  padding: 0 18px;
  background: rgba(255, 21, 21, 0.07);
  color: var(--red);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  animation: builder-badge-glow 2.8s ease-in-out infinite;
}

.builder-badge svg {
  width: 17px;
  height: 17px;
}

.builder-hero h2 {
  margin: 22px 0 0;
  color: #fff;
  font-size: clamp(46px, 7vw, 82px);
  font-weight: 900;
  line-height: 0.92;
  letter-spacing: 0;
}

.builder-hero h2 span {
  color: var(--red);
}

.builder-hero p {
  max-width: 820px;
  margin: 24px auto 0;
  color: var(--muted);
  font-size: clamp(16px, 1.45vw, 22px);
  font-weight: 500;
  line-height: 1.42;
}

.builder-steps {
  display: grid;
  width: min(960px, 100%);
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: clamp(42px, 5vw, 64px) auto 0;
  animation: builder-rise 720ms 120ms ease both;
}

.builder-step {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 12px;
  color: rgba(255, 255, 255, 0.46);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  transition:
    color 220ms ease,
    transform 220ms ease;
}

.builder-step::before {
  position: absolute;
  top: 22px;
  right: 50%;
  left: -50%;
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
  content: "";
  transition: background 240ms ease;
}

.builder-step:first-child::before {
  display: none;
}

.builder-step span {
  position: relative;
  z-index: 1;
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.045)),
    #171111;
  box-shadow:
    0 0 0 8px #0b0707,
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition:
    border-color 220ms ease,
    background 220ms ease,
    box-shadow 220ms ease,
    transform 220ms ease;
}

.builder-step svg {
  width: 20px;
  height: 20px;
}

.builder-step.is-active {
  color: var(--red);
  transform: translateY(-2px);
}

.builder-step.is-active span {
  border-color: var(--red);
  background:
    linear-gradient(180deg, rgba(255, 21, 21, 0.18), rgba(255, 21, 21, 0.1)),
    #160909;
  box-shadow:
    0 0 0 8px #0b0707,
    0 0 0 8px rgba(255, 21, 21, 0.08),
    0 16px 34px rgba(255, 21, 21, 0.16);
  animation: builder-step-pulse 1.8s ease-in-out infinite;
}

.builder-step.is-complete {
  color: var(--red);
}

.builder-step.is-complete::before {
  background: var(--red);
}

.builder-step.is-complete span {
  border-color: var(--red);
  background: var(--red);
  color: #fff;
}

.builder-step.is-complete span svg {
  opacity: 0;
}

.builder-step.is-complete span::after {
  position: absolute;
  color: #fff;
  content: "✓";
  font-size: 16px;
  font-weight: 900;
  animation: builder-check-in 260ms ease both;
}

.builder-progress {
  margin: 18px 0 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
  font-weight: 500;
  scroll-margin-top: 110px;
  text-align: center;
}

.builder-panel {
  width: min(1104px, 100%);
  margin: clamp(34px, 5vw, 52px) auto 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: clamp(24px, 3.8vw, 40px);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.015)),
    rgba(8, 8, 8, 0.9);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.32);
  animation: builder-panel-in 720ms 180ms ease both;
}

.builder-panel__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.builder-panel__head h3 {
  margin: 0;
  color: #fff;
  font-size: clamp(24px, 3vw, 30px);
  font-weight: 900;
}

.builder-panel__head p {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
}

.builder-counter {
  display: grid;
  min-width: 84px;
  justify-items: center;
  border: 1px solid rgba(255, 21, 21, 0.42);
  border-radius: 12px;
  padding: 10px 12px;
  background: rgba(255, 21, 21, 0.055);
}

.builder-counter strong {
  color: var(--red);
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
}

.builder-counter small {
  margin-left: 4px;
  color: rgba(255, 255, 255, 0.58);
  font-size: 15px;
}

.builder-counter span:last-child {
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.64);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.builder-meter {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  margin: 16px 0 34px;
  background: rgba(255, 255, 255, 0.08);
}

.builder-meter span {
  display: block;
  width: 13%;
  height: 100%;
  border-radius: inherit;
  background: var(--red);
  transition: width 420ms cubic-bezier(.2, .8, .2, 1);
  animation: builder-meter-glow 1.8s ease-in-out infinite alternate;
}

.builder-stage {
  display: none;
}

.builder-stage.is-active {
  display: block;
  animation: builder-stage-in 420ms cubic-bezier(.2, .8, .2, 1) both;
}

@keyframes builder-stage-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes builder-rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes builder-panel-in {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.985);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes builder-card-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.985);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes builder-select-pop {
  0% {
    transform: scale(1);
  }

  48% {
    transform: scale(1.018);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes builder-check-in {
  from {
    opacity: 0;
    transform: scale(0.62) rotate(-18deg);
  }

  to {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
}

@keyframes builder-step-pulse {
  0%,
  100% {
    box-shadow:
      0 0 0 8px #0b0707,
      0 0 0 12px rgba(255, 21, 21, 0.08),
      0 16px 34px rgba(255, 21, 21, 0.16);
  }

  50% {
    box-shadow:
      0 0 0 8px #0b0707,
      0 0 0 15px rgba(255, 21, 21, 0.03),
      0 18px 42px rgba(255, 21, 21, 0.22);
  }
}

@keyframes builder-badge-glow {
  0%,
  100% {
    box-shadow: 0 0 0 rgba(255, 21, 21, 0);
  }

  50% {
    box-shadow: 0 0 28px rgba(255, 21, 21, 0.16);
  }
}

@keyframes builder-meter-glow {
  from {
    box-shadow: 0 0 0 rgba(255, 21, 21, 0);
  }

  to {
    box-shadow: 0 0 18px rgba(255, 21, 21, 0.45);
  }
}

@keyframes builder-ambient {
  from {
    opacity: 0.45;
    transform: translate3d(-12px, -8px, 0);
  }

  to {
    opacity: 0.9;
    transform: translate3d(12px, 8px, 0);
  }
}

.builder-groups {
  display: grid;
  gap: 34px;
}

.builder-group__title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  color: var(--red);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  animation: builder-rise 420ms ease both;
}

.builder-group__title > span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--red);
}

.builder-group__title small {
  border-radius: 999px;
  padding: 4px 10px;
  background: rgba(255, 21, 21, 0.12);
  color: var(--red);
  font-size: 10px;
  font-weight: 900;
}

.builder-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.builder-card {
  position: relative;
  overflow: hidden;
  min-height: 192px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 0;
  background: rgba(255, 255, 255, 0.035);
  color: inherit;
  cursor: pointer;
  text-align: left;
  transition:
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
  animation: builder-card-in 440ms ease both;
}

.builder-card:nth-child(2) { animation-delay: 35ms; }
.builder-card:nth-child(3) { animation-delay: 70ms; }
.builder-card:nth-child(4) { animation-delay: 105ms; }
.builder-card:nth-child(5) { animation-delay: 140ms; }
.builder-card:nth-child(6) { animation-delay: 175ms; }
.builder-card:nth-child(7) { animation-delay: 210ms; }
.builder-card:nth-child(8) { animation-delay: 245ms; }

.builder-card:hover {
  border-color: rgba(255, 21, 21, 0.4);
  background: rgba(255, 255, 255, 0.052);
  transform: translateY(-5px);
}

.builder-card.is-selected {
  border-color: var(--red);
  background:
    linear-gradient(180deg, rgba(255, 21, 21, 0.075), rgba(255, 21, 21, 0.025)),
    rgba(255, 255, 255, 0.04);
  box-shadow: 0 18px 42px rgba(255, 21, 21, 0.1);
  animation-name: builder-card-in, builder-select-pop;
  animation-duration: 440ms, 260ms;
  animation-timing-function: ease, ease;
}

.builder-card.is-limit-hit {
  animation: limit-shake 420ms ease both;
}

.builder-card.is-selected:not(.is-required)::after {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  content: "✓";
  font-size: 13px;
  font-weight: 900;
}

.builder-card__check {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  animation: builder-check-in 220ms ease both;
}

.builder-card__check svg {
  width: 14px;
  height: 14px;
  stroke-width: 3;
}

.builder-card__preview {
  display: block;
  height: 96px;
  border-bottom: 1px solid rgba(255, 21, 21, 0.18);
  background-color: #050505;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 68% 66%;
}

.builder-card__preview--hero { background-image: linear-gradient(var(--red), var(--red)), linear-gradient(#cfcfcf, #cfcfcf), linear-gradient(#777, #777), linear-gradient(var(--red), var(--red)), linear-gradient(90deg, var(--red) 48%, transparent 48%); background-size: 18% 5%, 48% 7%, 34% 4%, 22% 16%, 42% 16%; background-position: 50% 24%, 50% 42%, 50% 55%, 43% 72%, 50% 72%; }
.builder-card__preview--about { background-image: linear-gradient(var(--red), var(--red)), linear-gradient(#777, #777), linear-gradient(#444, #444), linear-gradient(#222, #222); background-size: 22% 5%, 44% 5%, 34% 4%, 28% 44%; background-position: 18% 30%, 22% 44%, 22% 56%, 78% 50%; }
.builder-card__preview--services { background-image: linear-gradient(var(--red), var(--red)), linear-gradient(#777, #777), linear-gradient(var(--red), var(--red)), linear-gradient(#777, #777), linear-gradient(var(--red), var(--red)), linear-gradient(#777, #777); background-size: 24% 6%, 24% 5%, 24% 6%, 24% 5%, 24% 6%, 24% 5%; background-position: 20% 42%, 20% 56%, 50% 42%, 50% 56%, 80% 42%, 80% 56%; }
.builder-card__preview--features { background-image: radial-gradient(circle, var(--red) 0 28%, transparent 30%), linear-gradient(#bbb, #bbb), radial-gradient(circle, var(--red) 0 28%, transparent 30%), linear-gradient(#bbb, #bbb), radial-gradient(circle, var(--red) 0 28%, transparent 30%), linear-gradient(#bbb, #bbb); background-size: 10% 22%, 28% 5%, 10% 22%, 28% 5%, 10% 22%, 28% 5%; background-position: 16% 36%, 34% 36%, 16% 56%, 34% 56%, 58% 36%, 76% 36%; }
.builder-card__preview--pricing { background-image: linear-gradient(#333, #333), linear-gradient(var(--red), var(--red)), linear-gradient(#333, #333); background-size: 24% 48%, 26% 58%, 24% 48%; background-position: 20% 50%, 50% 50%, 80% 50%; }
.builder-card__preview--cta { background-image: linear-gradient(#ccc, #ccc), linear-gradient(var(--red), var(--red)); background-size: 64% 7%, 34% 18%; background-position: 50% 38%, 50% 64%; }
.builder-card__preview--form { background-image: linear-gradient(#333, #333), linear-gradient(#333, #333), linear-gradient(#333, #333), linear-gradient(var(--red), var(--red)); background-size: 40% 12%, 40% 12%, 82% 20%, 36% 12%; background-position: 26% 30%, 74% 30%, 50% 50%, 25% 78%; }
.builder-card__preview--footer { background-image: linear-gradient(var(--red), var(--red)), linear-gradient(#777, #777), linear-gradient(#777, #777), linear-gradient(#777, #777), radial-gradient(circle, var(--red) 0 35%, transparent 37%); background-size: 18% 5%, 18% 5%, 18% 5%, 18% 5%, 6% 10%; background-position: 18% 34%, 38% 42%, 58% 42%, 78% 42%, 82% 72%; }
.builder-card__preview--reviews { background-image: linear-gradient(var(--red), var(--red)), linear-gradient(#777, #777), linear-gradient(var(--red), var(--red)), linear-gradient(#777, #777); background-size: 24% 42%, 22% 5%, 24% 42%, 22% 5%; background-position: 30% 46%, 30% 72%, 70% 46%, 70% 72%; }
.builder-card__preview--faq { background-image: linear-gradient(#aaa, #aaa), radial-gradient(circle, var(--red) 0 32%, transparent 34%), linear-gradient(#777, #777), linear-gradient(#777, #777); background-size: 54% 4%, 8% 14%, 74% 5%, 62% 5%; background-position: 36% 28%, 86% 28%, 48% 50%, 43% 70%; }
.builder-card__preview--team { background-image: radial-gradient(circle, var(--red) 0 38%, transparent 40%), radial-gradient(circle, var(--red) 0 38%, transparent 40%), radial-gradient(circle, var(--red) 0 38%, transparent 40%), radial-gradient(circle, var(--red) 0 38%, transparent 40%), linear-gradient(#777, #777); background-size: 14% 26%, 14% 26%, 14% 26%, 14% 26%, 72% 4%; background-position: 20% 42%, 40% 42%, 60% 42%, 80% 42%, 50% 70%; }
.builder-card__preview--portfolio, .builder-card__preview--gallery { background-image: linear-gradient(var(--red), var(--red)), linear-gradient(#333, #333), linear-gradient(#333, #333), linear-gradient(var(--red), var(--red)), linear-gradient(#333, #333), linear-gradient(#333, #333); background-size: 20% 36%, 20% 16%, 20% 16%, 20% 36%, 20% 16%, 20% 16%; background-position: 20% 45%, 46% 34%, 46% 62%, 72% 45%, 92% 34%, 92% 62%; }
.builder-card__preview--stats { background-image: linear-gradient(var(--red), var(--red)), linear-gradient(var(--red), var(--red)), linear-gradient(var(--red), var(--red)), linear-gradient(var(--red), var(--red)); background-size: 14% 18%, 14% 18%, 14% 18%, 14% 18%; background-position: 22% 52%, 42% 52%, 62% 52%, 82% 52%; }
.builder-card__preview--process { background-image: radial-gradient(circle, var(--red) 0 38%, transparent 40%), radial-gradient(circle, #333 0 38%, transparent 40%), radial-gradient(circle, #333 0 38%, transparent 40%), radial-gradient(circle, #333 0 38%, transparent 40%), linear-gradient(#333, #333); background-size: 10% 18%, 10% 18%, 10% 18%, 10% 18%, 68% 2%; background-position: 20% 52%, 42% 52%, 64% 52%, 86% 52%, 53% 52%; }
.builder-card__preview--video { background-image: radial-gradient(circle, var(--red) 0 18%, transparent 19%), linear-gradient(var(--red), var(--red)), linear-gradient(#444, #444); background-size: 30% 52%, 70% 4%, 74% 52%; background-position: 50% 45%, 50% 76%, 50% 48%; }
.builder-card__preview--logos { background-image: linear-gradient(#333, #333), radial-gradient(circle, #333 0 35%, transparent 36%), linear-gradient(#333, #333), linear-gradient(#333, #333), linear-gradient(#333, #333); background-size: 18% 10%, 8% 14%, 18% 10%, 12% 10%, 18% 10%; background-position: 18% 54%, 38% 54%, 56% 54%, 74% 54%, 90% 54%; }
.builder-card__preview--blog { background-image: linear-gradient(var(--red), var(--red)), linear-gradient(#333, #333), linear-gradient(var(--red), var(--red)), linear-gradient(#333, #333), linear-gradient(var(--red), var(--red)), linear-gradient(#333, #333); background-size: 24% 32%, 22% 5%, 24% 32%, 22% 5%, 24% 32%, 22% 5%; background-position: 18% 50%, 18% 74%, 50% 50%, 50% 74%, 82% 50%, 82% 74%; }
.builder-card__preview--timeline { background-image: radial-gradient(circle, var(--red) 0 35%, transparent 36%), linear-gradient(var(--red), var(--red)), radial-gradient(circle, var(--red) 0 35%, transparent 36%), linear-gradient(var(--red), var(--red)), radial-gradient(circle, var(--red) 0 35%, transparent 36%); background-size: 7% 12%, 45% 3%, 7% 12%, 45% 3%, 7% 12%; background-position: 20% 32%, 40% 32%, 20% 50%, 40% 50%, 20% 68%; }
.builder-card__preview--calculator { background-image: linear-gradient(var(--red), var(--red)), linear-gradient(#777, #777), linear-gradient(var(--red), var(--red)), linear-gradient(var(--red), var(--red)); background-size: 32% 5%, 48% 5%, 28% 16%, 26% 18%; background-position: 28% 34%, 34% 50%, 30% 68%, 78% 58%; }
.builder-card__preview--compare { background-image: linear-gradient(var(--red), var(--red)), linear-gradient(#777, #777), linear-gradient(#777, #777), linear-gradient(#777, #777); background-size: 76% 5%, 24% 4%, 24% 4%, 24% 4%; background-position: 50% 30%, 22% 50%, 22% 64%, 22% 78%; }
.builder-card__preview--map { background-image: linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px), radial-gradient(circle, var(--red) 0 12%, transparent 13%); background-size: 14px 14px, 14px 14px, 34% 54%; background-position: center, center, 50% 52%; }
.builder-card__preview--timer { background-image: linear-gradient(#333, #333), linear-gradient(#333, #333), linear-gradient(#333, #333), linear-gradient(#333, #333); background-size: 16% 28%, 16% 28%, 16% 28%, 16% 28%; background-position: 18% 54%, 38% 54%, 58% 54%, 78% 54%; }

.builder-card__preview {
  --mock:
    linear-gradient(var(--red), var(--red)),
    linear-gradient(#bfbfbf, #bfbfbf),
    linear-gradient(#666, #666);
  --preview-label: "01 · BLOCK";
  position: relative;
  height: 122px;
  overflow: hidden;
  border-bottom-color: rgba(255, 21, 21, 0.22);
  background-color: #050505;
  background-image:
    linear-gradient(90deg, transparent 0 21%, rgba(255, 255, 255, 0.045) 21% 21.25%, transparent 21.25% 79%, rgba(255, 255, 255, 0.045) 79% 79.25%, transparent 79.25%),
    radial-gradient(circle at 50% 0%, rgba(255, 21, 21, 0.12), transparent 55%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.builder-card__preview::before {
  position: absolute;
  top: 20px;
  left: 50%;
  z-index: 4;
  width: min(62%, 260px);
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.44);
  content: var(--preview-label);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.builder-card__preview::after {
  position: absolute;
  top: 14px;
  left: 50%;
  width: min(64%, 270px);
  height: 86px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 9px;
  background-color: rgba(4, 4, 4, 0.96);
  background-image: var(--mock);
  background-repeat: no-repeat;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 18px 34px rgba(0, 0, 0, 0.28);
  content: "";
  transform: translateX(-50%);
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.builder-card:hover .builder-card__preview::after {
  border-color: rgba(255, 21, 21, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 18px 42px rgba(255, 21, 21, 0.08);
  transform: translateX(-50%) translateY(-3px);
}

.builder-card__preview--hero {
  --preview-label: "01 · Hero / головний екран";
  --mock:
    linear-gradient(var(--red), var(--red)),
    linear-gradient(#cfcfcf, #cfcfcf),
    linear-gradient(#808080, #808080),
    linear-gradient(#505050, #505050),
    linear-gradient(var(--red), var(--red)),
    linear-gradient(90deg, var(--red) 48%, transparent 48%),
    linear-gradient(rgba(255, 21, 21, 0.16), rgba(255, 21, 21, 0.16));
  background-size: auto;
  background-position: initial;
}

.builder-card__preview--hero::after {
  background-size: 18% 5px, 66% 10px, 52% 6px, 42% 5px, 25% 18px, 34% 18px, 100% 100%;
  background-position: 50% 22px, 50% 38px, 50% 55px, 50% 66px, 42% 76px, 58% 76px, center;
}

.builder-card__preview--about {
  --preview-label: "01 · Про нас / продукт";
  --mock:
    linear-gradient(var(--red), var(--red)),
    linear-gradient(#555, #555),
    linear-gradient(#333, #333),
    linear-gradient(#333, #333),
    linear-gradient(var(--red), var(--red)),
    linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05));
}

.builder-card__preview--about::after {
  background-size: 20% 5px, 50% 5px, 44% 4px, 36% 4px, 25% 13px, 30% 48px;
  background-position: 10% 28px, 10% 42px, 10% 54px, 10% 65px, 10% 76px, 84% 54px;
}

.builder-card__preview--services {
  --preview-label: "01 · Послуги / продукти";
  --mock:
    linear-gradient(var(--red), var(--red)),
    linear-gradient(#bbb, #bbb),
    linear-gradient(#333, #333),
    linear-gradient(var(--red), var(--red)),
    linear-gradient(#bbb, #bbb),
    linear-gradient(#333, #333),
    linear-gradient(var(--red), var(--red)),
    linear-gradient(#bbb, #bbb),
    linear-gradient(#333, #333);
}

.builder-card__preview--services::after {
  background-size: 22% 5px, 16% 5px, 20% 4px, 22% 5px, 16% 5px, 20% 4px, 22% 5px, 16% 5px, 20% 4px;
  background-position: 14% 40px, 14% 54px, 14% 66px, 50% 40px, 50% 54px, 50% 66px, 86% 40px, 86% 54px, 86% 66px;
}

.builder-card__preview--features {
  --preview-label: "01 · Переваги / features";
  --mock:
    radial-gradient(circle, var(--red) 0 48%, transparent 50%),
    linear-gradient(#cfcfcf, #cfcfcf),
    radial-gradient(circle, var(--red) 0 48%, transparent 50%),
    linear-gradient(#cfcfcf, #cfcfcf),
    radial-gradient(circle, var(--red) 0 48%, transparent 50%),
    linear-gradient(#cfcfcf, #cfcfcf),
    radial-gradient(circle, var(--red) 0 48%, transparent 50%),
    linear-gradient(#cfcfcf, #cfcfcf);
}

.builder-card__preview--features::after {
  background-size: 8% 10px, 27% 4px, 8% 10px, 27% 4px, 8% 10px, 27% 4px, 8% 10px, 27% 4px;
  background-position: 12% 42px, 29% 45px, 12% 66px, 29% 69px, 58% 42px, 75% 45px, 58% 66px, 75% 69px;
}

.builder-card__preview--pricing {
  --preview-label: "01 · Тарифи / прайс";
  --mock:
    linear-gradient(#333, #333),
    linear-gradient(#cfcfcf, #cfcfcf),
    linear-gradient(#777, #777),
    linear-gradient(var(--red), var(--red)),
    linear-gradient(#f0f0f0, #f0f0f0),
    linear-gradient(#f0f0f0, #f0f0f0),
    linear-gradient(#333, #333),
    linear-gradient(#cfcfcf, #cfcfcf),
    linear-gradient(#777, #777);
}

.builder-card__preview--pricing::after {
  background-size: 22% 34px, 12% 6px, 18% 4px, 24% 44px, 13% 6px, 18% 4px, 22% 34px, 12% 6px, 18% 4px;
  background-position: 16% 58px, 16% 49px, 16% 68px, 50% 55px, 50% 46px, 50% 68px, 84% 58px, 84% 49px, 84% 68px;
}

.builder-card__preview--cta {
  --preview-label: "01 · CTA блок";
  --mock:
    linear-gradient(rgba(255, 21, 21, 0.14), rgba(255, 21, 21, 0.14)),
    linear-gradient(#d8d8d8, #d8d8d8),
    linear-gradient(#777, #777),
    linear-gradient(var(--red), var(--red));
}

.builder-card__preview--cta::after {
  background-size: 92% 52px, 54% 6px, 44% 5px, 34% 18px;
  background-position: 50% 58px, 50% 40px, 50% 53px, 50% 71px;
}

.builder-card__preview--form {
  --preview-label: "01 · Контактна форма";
  --mock:
    linear-gradient(#2d2d2d, #2d2d2d),
    linear-gradient(#2d2d2d, #2d2d2d),
    linear-gradient(#2d2d2d, #2d2d2d),
    linear-gradient(var(--red), var(--red)),
    linear-gradient(#3b3b3b, #3b3b3b);
}

.builder-card__preview--form::after {
  background-size: 44% 12px, 44% 12px, 92% 20px, 46% 13px, 32% 5px;
  background-position: 3% 34px, 97% 34px, 50% 56px, 3% 80px, 82% 82px;
}

.builder-card__preview--footer {
  --preview-label: "01 · Footer";
  --mock:
    linear-gradient(var(--red), var(--red)),
    linear-gradient(#888, #888),
    linear-gradient(#444, #444),
    linear-gradient(#888, #888),
    linear-gradient(#444, #444),
    linear-gradient(#888, #888),
    radial-gradient(circle, var(--red) 0 48%, transparent 50%),
    radial-gradient(circle, var(--red) 0 48%, transparent 50%),
    radial-gradient(circle, var(--red) 0 48%, transparent 50%);
}

.builder-card__preview--footer::after {
  background-size: 20% 5px, 18% 5px, 16% 4px, 18% 5px, 16% 4px, 18% 5px, 4% 6px, 4% 6px, 4% 6px;
  background-position: 8% 44px, 36% 46px, 36% 58px, 60% 46px, 60% 58px, 84% 46px, 82% 76px, 89% 76px, 96% 76px;
}

.builder-card__preview--reviews {
  --preview-label: "01 · Відгуки клієнтів";
  --mock:
    radial-gradient(circle, var(--red) 0 25%, transparent 27%),
    radial-gradient(circle, var(--red) 0 25%, transparent 27%),
    radial-gradient(circle, var(--red) 0 25%, transparent 27%),
    linear-gradient(#3b3b3b, #3b3b3b),
    linear-gradient(#888, #888),
    radial-gradient(circle, var(--red) 0 25%, transparent 27%),
    linear-gradient(#3b3b3b, #3b3b3b),
    linear-gradient(#888, #888);
}

.builder-card__preview--reviews::after {
  background-size: 4% 5px, 4% 5px, 4% 5px, 36% 34px, 20% 5px, 8% 12px, 36% 34px, 24% 5px;
  background-position: 8% 26px, 14% 26px, 20% 26px, 22% 44px, 22% 62px, 55% 58px, 72% 44px, 72% 62px;
}

.builder-card__preview--faq {
  --preview-label: "01 · FAQ";
  --mock:
    linear-gradient(rgba(255, 21, 21, 0.18), rgba(255, 21, 21, 0.18)),
    linear-gradient(#aaa, #aaa),
    radial-gradient(circle, var(--red) 0 42%, transparent 44%),
    linear-gradient(#777, #777),
    radial-gradient(circle, #333 0 42%, transparent 44%),
    linear-gradient(#888, #888),
    radial-gradient(circle, #333 0 42%, transparent 44%);
}

.builder-card__preview--faq::after {
  background-size: 90% 18px, 64% 5px, 5% 8px, 74% 5px, 5% 8px, 68% 5px, 5% 8px;
  background-position: 50% 26px, 12% 26px, 92% 26px, 12% 48px, 92% 48px, 12% 66px, 92% 66px;
}

.builder-card__preview--team {
  --preview-label: "01 · Команда";
  --mock:
    radial-gradient(circle, var(--red) 0 45%, transparent 47%),
    linear-gradient(#999, #999),
    radial-gradient(circle, var(--red) 0 45%, transparent 47%),
    linear-gradient(#999, #999),
    radial-gradient(circle, var(--red) 0 45%, transparent 47%),
    linear-gradient(#999, #999),
    radial-gradient(circle, var(--red) 0 45%, transparent 47%),
    linear-gradient(#999, #999);
}

.builder-card__preview--team::after {
  background-size: 14% 26px, 12% 4px, 14% 26px, 12% 4px, 14% 26px, 12% 4px, 14% 26px, 12% 4px;
  background-position: 14% 42px, 14% 65px, 38% 42px, 38% 65px, 62% 42px, 62% 65px, 86% 42px, 86% 65px;
}

.builder-card__preview--portfolio,
.builder-card__preview--gallery {
  --preview-label: "01 · Портфоліо / кейси";
  --mock:
    linear-gradient(rgba(255, 21, 21, 0.28), rgba(255, 21, 21, 0.28)),
    linear-gradient(#242424, #242424),
    linear-gradient(rgba(255, 21, 21, 0.16), rgba(255, 21, 21, 0.16)),
    linear-gradient(#242424, #242424),
    linear-gradient(#242424, #242424),
    linear-gradient(rgba(255, 21, 21, 0.16), rgba(255, 21, 21, 0.16));
}

.builder-card__preview--portfolio::after,
.builder-card__preview--gallery::after {
  background-size: 22% 38px, 22% 16px, 22% 28px, 22% 16px, 22% 28px, 22% 16px;
  background-position: 10% 44px, 40% 28px, 40% 58px, 70% 28px, 70% 58px, 94% 43px;
}

.builder-card__preview--stats {
  --preview-label: "01 · Статистика / цифри";
  --mock:
    linear-gradient(var(--red), var(--red)),
    linear-gradient(#3d3d3d, #3d3d3d),
    linear-gradient(var(--red), var(--red)),
    linear-gradient(#3d3d3d, #3d3d3d),
    linear-gradient(var(--red), var(--red)),
    linear-gradient(#3d3d3d, #3d3d3d),
    linear-gradient(var(--red), var(--red)),
    linear-gradient(#3d3d3d, #3d3d3d);
}

.builder-card__preview--stats::after {
  background-size: 13% 15px, 18% 4px, 13% 15px, 18% 4px, 13% 15px, 18% 4px, 13% 15px, 18% 4px;
  background-position: 14% 44px, 14% 64px, 38% 44px, 38% 64px, 62% 44px, 62% 64px, 86% 44px, 86% 64px;
}

.builder-card__preview--process {
  --preview-label: "01 · Процес роботи";
  --mock:
    radial-gradient(circle, var(--red) 0 45%, transparent 47%),
    radial-gradient(circle, #262626 0 45%, transparent 47%),
    radial-gradient(circle, #262626 0 45%, transparent 47%),
    radial-gradient(circle, #262626 0 45%, transparent 47%),
    linear-gradient(#303030, #303030);
}

.builder-card__preview--process::after {
  background-size: 10% 16px, 10% 16px, 10% 16px, 10% 16px, 78% 2px;
  background-position: 12% 48px, 38% 48px, 64% 48px, 90% 48px, 50% 48px;
}

.builder-card__preview--video {
  --preview-label: "01 · Відео-блок";
  --mock:
    linear-gradient(rgba(255, 21, 21, 0.16), rgba(255, 21, 21, 0.16)),
    radial-gradient(circle, var(--red) 0 28%, transparent 30%),
    linear-gradient(var(--red), var(--red)),
    linear-gradient(#333, #333);
}

.builder-card__preview--video::after {
  background-size: 90% 52px, 24% 34px, 30% 4px, 58% 4px;
  background-position: 50% 44px, 50% 44px, 18% 70px, 70% 70px;
}

.builder-card__preview--logos {
  --preview-label: "01 · Партнери / логотипи";
  --mock:
    linear-gradient(#272727, #272727),
    radial-gradient(circle, #333 0 45%, transparent 47%),
    linear-gradient(#272727, #272727),
    linear-gradient(#272727, #272727),
    linear-gradient(45deg, #333 0 48%, transparent 50%),
    linear-gradient(#272727, #272727);
}

.builder-card__preview--logos::after {
  background-size: 18% 10px, 7% 12px, 18% 10px, 14% 10px, 8% 12px, 18% 10px;
  background-position: 12% 50px, 33% 50px, 50% 50px, 68% 50px, 80% 50px, 94% 50px;
}

.builder-card__preview--blog {
  --preview-label: "01 · Блог-прев'ю";
  --mock:
    linear-gradient(rgba(255, 21, 21, 0.22), rgba(255, 21, 21, 0.22)),
    linear-gradient(var(--red), var(--red)),
    linear-gradient(#333, #333),
    linear-gradient(rgba(255, 21, 21, 0.14), rgba(255, 21, 21, 0.14)),
    linear-gradient(var(--red), var(--red)),
    linear-gradient(#333, #333),
    linear-gradient(rgba(255, 21, 21, 0.14), rgba(255, 21, 21, 0.14)),
    linear-gradient(var(--red), var(--red)),
    linear-gradient(#333, #333);
}

.builder-card__preview--blog::after {
  background-size: 26% 34px, 20% 4px, 22% 4px, 26% 34px, 18% 4px, 22% 4px, 26% 34px, 18% 4px, 22% 4px;
  background-position: 12% 42px, 12% 62px, 12% 70px, 50% 42px, 50% 62px, 50% 70px, 88% 42px, 88% 62px, 88% 70px;
}

.builder-card__preview--timeline {
  --preview-label: "01 · Історія / timeline";
  --mock:
    radial-gradient(circle, var(--red) 0 45%, transparent 47%),
    linear-gradient(var(--red), var(--red)),
    radial-gradient(circle, var(--red) 0 45%, transparent 47%),
    linear-gradient(var(--red), var(--red)),
    radial-gradient(circle, var(--red) 0 45%, transparent 47%),
    linear-gradient(#333, #333),
    linear-gradient(#333, #333),
    linear-gradient(#333, #333);
}

.builder-card__preview--timeline::after {
  background-size: 7% 10px, 36% 3px, 7% 10px, 36% 3px, 7% 10px, 58% 3px, 50% 3px, 42% 3px;
  background-position: 10% 32px, 28% 32px, 10% 48px, 28% 48px, 10% 64px, 42% 32px, 38% 48px, 34% 64px;
}

.builder-card__preview--calculator {
  --preview-label: "01 · Калькулятор вартості";
  --mock:
    linear-gradient(var(--red), var(--red)),
    linear-gradient(var(--red), var(--red)),
    linear-gradient(var(--red), var(--red)),
    linear-gradient(#222, #222),
    linear-gradient(var(--red), var(--red)),
    linear-gradient(var(--red), var(--red));
}

.builder-card__preview--calculator::after {
  background-size: 26% 4px, 34% 4px, 44% 4px, 28% 34px, 26% 12px, 28% 8px;
  background-position: 12% 28px, 12% 42px, 12% 56px, 78% 43px, 78% 36px, 78% 58px;
}

.builder-card__preview--compare {
  --preview-label: "01 · Порівняльна таблиця";
  --mock:
    linear-gradient(rgba(255, 21, 21, 0.16), rgba(255, 21, 21, 0.16)),
    linear-gradient(var(--red), var(--red)),
    linear-gradient(#bfbfbf, #bfbfbf),
    linear-gradient(#bfbfbf, #bfbfbf),
    linear-gradient(var(--red), var(--red)),
    linear-gradient(var(--red), var(--red));
}

.builder-card__preview--compare::after {
  background-size: 94% 16px, 28% 4px, 22% 4px, 22% 4px, 3% 4px, 3% 4px;
  background-position: 50% 24px, 13% 28px, 14% 45px, 14% 61px, 50% 45px, 50% 61px;
}

.builder-card__preview--map {
  --preview-label: "01 · Карта / локація";
  --mock:
    linear-gradient(rgba(255,255,255,.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.1) 1px, transparent 1px),
    linear-gradient(var(--red), var(--red)),
    radial-gradient(circle, var(--red) 0 18%, transparent 20%);
}

.builder-card__preview--map::after {
  background-size: 16px 16px, 16px 16px, 40% 3px, 24% 36px;
  background-position: center, center, 50% 48px, 50% 48px;
}

.builder-card__preview--timer {
  --preview-label: "01 · Таймер / countdown";
  --mock:
    linear-gradient(#252525, #252525),
    linear-gradient(#252525, #252525),
    linear-gradient(#252525, #252525),
    linear-gradient(#252525, #252525),
    linear-gradient(var(--red), var(--red)),
    linear-gradient(var(--red), var(--red)),
    linear-gradient(var(--red), var(--red));
}

.builder-card__preview--timer::after {
  background-size: 16% 28px, 16% 28px, 16% 28px, 16% 28px, 2% 4px, 2% 4px, 2% 4px;
  background-position: 16% 50px, 38% 50px, 62% 50px, 84% 50px, 27% 50px, 50% 50px, 73% 50px;
}

.builder-card__preview {
  height: 124px;
  border-bottom: 1px solid rgba(255, 21, 21, 0.2);
  background:
    linear-gradient(90deg, transparent 0 19%, rgba(255, 255, 255, 0.052) 19% 19.2%, transparent 19.2% 80.8%, rgba(255, 255, 255, 0.052) 80.8% 81%, transparent 81%),
    radial-gradient(circle at 50% 18%, rgba(255, 21, 21, 0.11), transparent 54%),
    #030303;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.builder-card.is-selected .builder-card__preview {
  background:
    linear-gradient(90deg, transparent 0 19%, rgba(255, 255, 255, 0.052) 19% 19.2%, transparent 19.2% 80.8%, rgba(255, 255, 255, 0.052) 80.8% 81%, transparent 81%),
    linear-gradient(180deg, rgba(255, 21, 21, 0.08), transparent 70%),
    #030303;
}

.builder-card__preview::before {
  top: 19px;
  left: 50%;
  width: min(68%, 292px);
  padding-left: 18px;
  color: rgba(255, 255, 255, 0.42);
  transform: translateX(-50%);
}

.builder-card__preview::after {
  top: 12px;
  width: min(70%, 302px);
  height: 92px;
  border-color: rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  background-color: #050505;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    inset 0 -26px 34px rgba(255, 21, 21, 0.025),
    0 16px 32px rgba(0, 0, 0, 0.32);
}

.builder-card.is-selected .builder-card__preview::before {
  color: rgba(255, 255, 255, 0.5);
}

.builder-card.is-selected .builder-card__preview::after {
  border-color: rgba(255, 21, 21, 0.58);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 0 -30px 34px rgba(255, 21, 21, 0.08),
    0 18px 38px rgba(255, 21, 21, 0.12);
}

.builder-card__preview--hero::after {
  background-size: 22% 5px, 66% 10px, 52% 6px, 42% 5px, 25% 18px, 34% 18px, 100% 100%;
  background-position: 50% 24px, 50% 42px, 50% 58px, 50% 69px, 42% 80px, 58% 80px, center;
}

.builder-card__preview--about::after {
  background-size: 20% 5px, 48% 5px, 42% 4px, 34% 4px, 24% 14px, 31% 48px;
  background-position: 12% 30px, 13% 45px, 13% 58px, 13% 69px, 13% 81px, 84% 58px;
}

.builder-card__preview--services::after {
  background-size: 26% 5px, 17% 5px, 22% 4px, 26% 5px, 17% 5px, 22% 4px, 26% 5px, 17% 5px, 22% 4px;
  background-position: 14% 42px, 14% 57px, 14% 69px, 50% 42px, 50% 57px, 50% 69px, 86% 42px, 86% 57px, 86% 69px;
}

.builder-card__preview--features::after {
  background-size: 8% 11px, 28% 4px, 8% 11px, 28% 4px, 8% 11px, 28% 4px, 8% 11px, 28% 4px;
  background-position: 12% 43px, 29% 46px, 12% 69px, 29% 72px, 58% 43px, 75% 46px, 58% 69px, 75% 72px;
}

.builder-card__preview--pricing::after {
  background-size: 22% 36px, 12% 6px, 18% 4px, 24% 48px, 13% 6px, 18% 4px, 22% 36px, 12% 6px, 18% 4px;
  background-position: 16% 62px, 16% 52px, 16% 73px, 50% 59px, 50% 49px, 50% 73px, 84% 62px, 84% 52px, 84% 73px;
}

.builder-card__preview--cta::after {
  background-size: 92% 54px, 54% 6px, 44% 5px, 34% 19px;
  background-position: 50% 61px, 50% 43px, 50% 57px, 50% 76px;
}

.builder-card__preview--form::after {
  background-size: 44% 12px, 44% 12px, 92% 21px, 46% 13px, 32% 5px;
  background-position: 3% 36px, 97% 36px, 50% 60px, 3% 84px, 82% 86px;
}

.builder-card__preview--footer::after {
  background-size: 20% 5px, 18% 5px, 16% 4px, 18% 5px, 16% 4px, 18% 5px, 4% 7px, 4% 7px, 4% 7px;
  background-position: 8% 47px, 36% 49px, 36% 62px, 60% 49px, 60% 62px, 84% 49px, 82% 81px, 89% 81px, 96% 81px;
}

.builder-card__preview--reviews::after {
  background-size: 4% 5px, 4% 5px, 4% 5px, 36% 35px, 20% 5px, 8% 12px, 36% 35px, 24% 5px;
  background-position: 8% 28px, 14% 28px, 20% 28px, 22% 48px, 22% 68px, 55% 64px, 72% 48px, 72% 68px;
}

.builder-card__preview--faq::after {
  background-size: 90% 18px, 64% 5px, 5% 8px, 74% 5px, 5% 8px, 68% 5px, 5% 8px;
  background-position: 50% 29px, 12% 29px, 92% 29px, 12% 53px, 92% 53px, 12% 73px, 92% 73px;
}

.builder-card__preview--portfolio::after,
.builder-card__preview--gallery::after {
  background-size: 22% 40px, 22% 17px, 22% 29px, 22% 17px, 22% 29px, 22% 17px;
  background-position: 10% 48px, 40% 31px, 40% 64px, 70% 31px, 70% 64px, 94% 48px;
}

.builder-card__preview--gallery {
  --preview-label: "01 · Галерея";
}

.builder-card__preview--team::after {
  background-size: 13% 25px, 12% 4px, 8% 3px, 13% 25px, 12% 4px, 8% 3px, 13% 25px, 12% 4px, 8% 3px, 13% 25px, 12% 4px, 8% 3px;
  background-position: 13% 46px, 13% 75px, 13% 83px, 38% 46px, 38% 75px, 38% 83px, 63% 46px, 63% 75px, 63% 83px, 88% 46px, 88% 75px, 88% 83px;
}

.builder-card__preview--team {
  --mock:
    radial-gradient(circle, var(--red) 0 45%, transparent 47%),
    linear-gradient(#aaa, #aaa),
    linear-gradient(#444, #444),
    radial-gradient(circle, var(--red) 0 45%, transparent 47%),
    linear-gradient(#aaa, #aaa),
    linear-gradient(#444, #444),
    radial-gradient(circle, var(--red) 0 45%, transparent 47%),
    linear-gradient(#aaa, #aaa),
    linear-gradient(#444, #444),
    radial-gradient(circle, var(--red) 0 45%, transparent 47%),
    linear-gradient(#aaa, #aaa),
    linear-gradient(#444, #444);
}

.builder-card__preview--stats {
  --mock:
    linear-gradient(var(--red), var(--red)),
    linear-gradient(#4a4a4a, #4a4a4a),
    linear-gradient(#9a9a9a, #9a9a9a),
    linear-gradient(var(--red), var(--red)),
    linear-gradient(#4a4a4a, #4a4a4a),
    linear-gradient(#9a9a9a, #9a9a9a),
    linear-gradient(var(--red), var(--red)),
    linear-gradient(#4a4a4a, #4a4a4a),
    linear-gradient(#9a9a9a, #9a9a9a),
    linear-gradient(var(--red), var(--red)),
    linear-gradient(#4a4a4a, #4a4a4a),
    linear-gradient(#9a9a9a, #9a9a9a);
}

.builder-card__preview--stats::after {
  background-size: 14% 16px, 17% 3px, 9% 3px, 14% 16px, 17% 3px, 9% 3px, 14% 16px, 17% 3px, 9% 3px, 14% 16px, 17% 3px, 9% 3px;
  background-position: 12% 47px, 12% 70px, 12% 78px, 38% 47px, 38% 70px, 38% 78px, 64% 47px, 64% 70px, 64% 78px, 90% 47px, 90% 70px, 90% 78px;
}

.builder-card__preview--process {
  --mock:
    radial-gradient(circle, var(--red) 0 42%, transparent 44%),
    radial-gradient(circle, #252525 0 42%, transparent 44%),
    radial-gradient(circle, #252525 0 42%, transparent 44%),
    radial-gradient(circle, #252525 0 42%, transparent 44%),
    linear-gradient(#303030, #303030),
    linear-gradient(#7c7c7c, #7c7c7c),
    linear-gradient(#444, #444),
    linear-gradient(#444, #444),
    linear-gradient(#444, #444);
}

.builder-card__preview--process::after {
  background-size: 10% 18px, 10% 18px, 10% 18px, 10% 18px, 78% 2px, 8% 3px, 8% 3px, 8% 3px, 8% 3px;
  background-position: 13% 51px, 38% 51px, 63% 51px, 88% 51px, 50% 51px, 13% 73px, 38% 73px, 63% 73px, 88% 73px;
}

.builder-card__preview--video {
  --mock:
    linear-gradient(rgba(255, 21, 21, 0.16), rgba(255, 21, 21, 0.16)),
    radial-gradient(circle, var(--red) 0 27%, transparent 29%),
    linear-gradient(90deg, transparent 0 42%, #fff 42% 62%, transparent 62%),
    linear-gradient(var(--red), var(--red)),
    linear-gradient(#3b3b3b, #3b3b3b);
}

.builder-card__preview--video::after {
  background-size: 90% 54px, 24% 36px, 7% 12px, 34% 4px, 80% 3px;
  background-position: 50% 49px, 50% 49px, 51% 49px, 21% 79px, 50% 79px;
}

.builder-card__preview--logos {
  --mock:
    linear-gradient(#2c2c2c, #2c2c2c),
    radial-gradient(circle, #303030 0 45%, transparent 47%),
    linear-gradient(#2c2c2c, #2c2c2c),
    linear-gradient(#2c2c2c, #2c2c2c),
    linear-gradient(45deg, #303030 0 48%, transparent 50%),
    linear-gradient(#2c2c2c, #2c2c2c),
    linear-gradient(var(--red), var(--red));
}

.builder-card__preview--logos::after {
  background-size: 18% 10px, 7% 12px, 18% 10px, 14% 10px, 8% 12px, 18% 10px, 24% 2px;
  background-position: 12% 56px, 33% 56px, 50% 56px, 68% 56px, 80% 56px, 94% 56px, 12% 43px;
}

.builder-card__preview--blog {
  --mock:
    linear-gradient(rgba(255, 21, 21, 0.22), rgba(255, 21, 21, 0.22)),
    linear-gradient(var(--red), var(--red)),
    linear-gradient(#a9a9a9, #a9a9a9),
    linear-gradient(#494949, #494949),
    linear-gradient(rgba(255, 21, 21, 0.14), rgba(255, 21, 21, 0.14)),
    linear-gradient(var(--red), var(--red)),
    linear-gradient(#a9a9a9, #a9a9a9),
    linear-gradient(#494949, #494949),
    linear-gradient(rgba(255, 21, 21, 0.14), rgba(255, 21, 21, 0.14)),
    linear-gradient(var(--red), var(--red)),
    linear-gradient(#a9a9a9, #a9a9a9),
    linear-gradient(#494949, #494949);
}

.builder-card__preview--blog::after {
  background-size: 25% 36px, 20% 4px, 22% 4px, 16% 3px, 25% 36px, 18% 4px, 22% 4px, 16% 3px, 25% 36px, 18% 4px, 22% 4px, 16% 3px;
  background-position: 12% 48px, 12% 67px, 12% 76px, 12% 84px, 50% 48px, 50% 67px, 50% 76px, 50% 84px, 88% 48px, 88% 67px, 88% 76px, 88% 84px;
}

.builder-card__preview--timeline {
  --mock:
    radial-gradient(circle, var(--red) 0 42%, transparent 44%),
    linear-gradient(var(--red), var(--red)),
    radial-gradient(circle, var(--red) 0 42%, transparent 44%),
    linear-gradient(var(--red), var(--red)),
    radial-gradient(circle, var(--red) 0 42%, transparent 44%),
    linear-gradient(#3b3b3b, #3b3b3b),
    linear-gradient(#8b8b8b, #8b8b8b),
    linear-gradient(#3b3b3b, #3b3b3b),
    linear-gradient(#8b8b8b, #8b8b8b),
    linear-gradient(#3b3b3b, #3b3b3b);
}

.builder-card__preview--timeline::after {
  background-size: 7% 10px, 34% 3px, 7% 10px, 34% 3px, 7% 10px, 62% 3px, 42% 3px, 58% 3px, 38% 3px, 52% 3px;
  background-position: 10% 34px, 28% 34px, 10% 53px, 28% 53px, 10% 72px, 43% 34px, 32% 42px, 41% 53px, 30% 61px, 38% 72px;
}

.builder-card__preview--calculator {
  --mock:
    linear-gradient(var(--red), var(--red)),
    linear-gradient(var(--red), var(--red)),
    linear-gradient(var(--red), var(--red)),
    linear-gradient(#2a2a2a, #2a2a2a),
    linear-gradient(var(--red), var(--red)),
    linear-gradient(#f1f1f1, #f1f1f1),
    linear-gradient(var(--red), var(--red)),
    linear-gradient(var(--red), var(--red));
}

.builder-card__preview--calculator::after {
  background-size: 27% 4px, 34% 4px, 44% 4px, 30% 38px, 24% 13px, 18% 4px, 26% 8px, 26% 8px;
  background-position: 13% 31px, 13% 45px, 13% 60px, 79% 49px, 79% 40px, 79% 40px, 79% 58px, 79% 72px;
}

.builder-card__preview--compare {
  --mock:
    linear-gradient(rgba(255, 21, 21, 0.16), rgba(255, 21, 21, 0.16)),
    linear-gradient(var(--red), var(--red)),
    linear-gradient(#bfbfbf, #bfbfbf),
    linear-gradient(#bfbfbf, #bfbfbf),
    linear-gradient(var(--red), var(--red)),
    linear-gradient(var(--red), var(--red)),
    linear-gradient(#303030, #303030),
    linear-gradient(#303030, #303030),
    linear-gradient(#303030, #303030);
}

.builder-card__preview--compare::after {
  background-size: 94% 17px, 29% 4px, 22% 4px, 22% 4px, 3% 4px, 3% 4px, 1px 58px, 1px 58px, 94% 1px;
  background-position: 50% 28px, 13% 32px, 14% 51px, 14% 69px, 50% 51px, 50% 69px, 39% 56px, 68% 56px, 50% 47px;
}

.builder-card__preview--map {
  --mock:
    linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px),
    linear-gradient(var(--red), var(--red)),
    linear-gradient(90deg, transparent 0 42%, #fff 42% 58%, transparent 58%),
    radial-gradient(circle, var(--red) 0 18%, transparent 20%);
}

.builder-card__preview--map::after {
  background-size: 15px 15px, 15px 15px, 42% 3px, 6% 11px, 24% 36px;
  background-position: center, center, 50% 54px, 50% 54px, 50% 54px;
}

.builder-card__preview--timer {
  --mock:
    linear-gradient(#262626, #262626),
    linear-gradient(#262626, #262626),
    linear-gradient(#262626, #262626),
    linear-gradient(#262626, #262626),
    linear-gradient(var(--red), var(--red)),
    linear-gradient(var(--red), var(--red)),
    linear-gradient(var(--red), var(--red)),
    linear-gradient(#a9a9a9, #a9a9a9),
    linear-gradient(#a9a9a9, #a9a9a9),
    linear-gradient(#a9a9a9, #a9a9a9),
    linear-gradient(#a9a9a9, #a9a9a9);
}

.builder-card__preview--timer::after {
  background-size: 16% 30px, 16% 30px, 16% 30px, 16% 30px, 2% 4px, 2% 4px, 2% 4px, 5% 4px, 5% 4px, 5% 4px, 5% 4px;
  background-position: 16% 57px, 38% 57px, 62% 57px, 84% 57px, 27% 57px, 50% 57px, 73% 57px, 16% 57px, 38% 57px, 62% 57px, 84% 57px;
}

.builder-card__preview.has-svg {
  display: grid;
  place-items: center;
}

.builder-card__preview.has-svg::before,
.builder-card__preview.has-svg::after {
  display: none;
}

.builder-preview-svg {
  display: block;
  width: min(78%, 318px);
  height: 96px;
  overflow: visible;
  filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.34));
}

.builder-preview-svg .screen {
  fill: #050505;
  stroke: rgba(255, 255, 255, 0.14);
  stroke-width: 1;
}

.builder-preview-svg .selected-screen {
  stroke: rgba(255, 21, 21, 0.48);
}

.builder-preview-svg .soft {
  fill: rgba(255, 21, 21, 0.12);
}

.builder-preview-svg .panel {
  fill: #111;
  stroke: rgba(255, 255, 255, 0.1);
  stroke-width: 1;
}

.builder-preview-svg .red-panel {
  fill: rgba(255, 21, 21, 0.15);
  stroke: rgba(255, 21, 21, 0.45);
  stroke-width: 1;
}

.builder-preview-svg .red {
  fill: var(--red);
}

.builder-preview-svg .line {
  fill: #8d8d8d;
}

.builder-preview-svg .line-strong {
  fill: #cfcfcf;
}

.builder-preview-svg .muted {
  fill: #343434;
}

.builder-preview-svg .label {
  fill: rgba(255, 255, 255, 0.43);
  font-family: Montserrat, Arial, sans-serif;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.builder-card.is-selected .builder-preview-svg .screen {
  stroke: rgba(255, 21, 21, 0.72);
}

.builder-card__body {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  padding: 16px;
}

.builder-card__icon {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.58);
}

.builder-card__icon svg {
  width: 16px;
  height: 16px;
}

.builder-card strong {
  display: inline;
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.25;
}

.builder-card em {
  display: block;
  margin-top: 7px;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.45;
}

.builder-card.is-required .builder-card__body span:last-child::after {
  display: inline-flex;
  position: relative;
  top: -1px;
  align-items: center;
  margin-left: 8px;
  border-radius: 999px;
  padding: 3px 7px;
  background: rgba(255, 21, 21, 0.16);
  color: var(--red);
  content: "обов'язково";
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
  vertical-align: middle;
}

@keyframes limit-shake {
  0%,
  100% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-5px);
    border-color: rgba(255, 21, 21, 0.75);
  }

  50% {
    transform: translateX(5px);
  }

  75% {
    transform: translateX(-3px);
  }
}

.style-preview {
  --accent: #ff1515;
  --preview-bg: #090909;
  --preview-surface: rgba(255, 255, 255, 0.055);
  --preview-text: #fff;
  --preview-muted: rgba(255, 255, 255, 0.72);
  --preview-font: "Montserrat";
  display: flex;
  min-height: 122px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 62%, transparent);
  border-radius: 12px;
  margin: 22px 0 30px;
  padding: 24px 30px;
  background:
    radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 42%),
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, transparent), transparent 42%),
    var(--preview-bg);
  color: var(--preview-text);
  font-family: var(--preview-font), Montserrat, sans-serif;
  transition:
    border-color 260ms ease,
    background 260ms ease,
    color 260ms ease,
    transform 260ms ease;
}

.style-preview.is-changing {
  animation: preview-pop 420ms cubic-bezier(.2, .8, .2, 1) both;
}

.style-preview[data-palette="corporate-blue"] {
  --accent: #2f6df6;
  --preview-bg: #f5f7fb;
  --preview-surface: rgba(47, 109, 246, 0.12);
  --preview-text: #101522;
  --preview-muted: rgba(16, 21, 34, 0.68);
}

.style-preview[data-palette="fresh-green"] {
  --accent: #18a957;
  --preview-bg: #f7f8f4;
  --preview-surface: rgba(24, 169, 87, 0.12);
  --preview-text: #111b14;
  --preview-muted: rgba(17, 27, 20, 0.68);
}

.style-preview[data-palette="premium-purple"] {
  --accent: #a64df4;
  --preview-bg: #080012;
}

.style-preview[data-palette="warm-orange"] {
  --accent: #ff5a12;
  --preview-bg: #fff8ef;
  --preview-surface: rgba(255, 90, 18, 0.13);
  --preview-text: #21140d;
  --preview-muted: rgba(33, 20, 13, 0.68);
}

.style-preview[data-palette="minimal-mono"] {
  --accent: #111;
  --preview-bg: #f7f7f7;
  --preview-surface: rgba(0, 0, 0, 0.08);
  --preview-text: #101010;
  --preview-muted: rgba(16, 16, 16, 0.66);
}

.style-preview[data-palette="cyber-teal"] {
  --accent: #23c7b7;
  --preview-bg: #062b28;
}

.style-preview[data-palette="soft-pink"] {
  --accent: #e74596;
  --preview-bg: #fff1f6;
  --preview-surface: rgba(231, 69, 150, 0.13);
  --preview-text: #23121b;
  --preview-muted: rgba(35, 18, 27, 0.66);
}

.style-preview[data-palette="luxury-gold"] {
  --accent: #d9b93d;
}

.style-preview[data-palette="ocean-navy"] {
  --accent: #213f91;
  --preview-bg: #f5f7fb;
  --preview-surface: rgba(33, 63, 145, 0.12);
  --preview-text: #101522;
  --preview-muted: rgba(16, 21, 34, 0.68);
}

.style-preview[data-palette="neon-lime"] {
  --accent: #9beb2f;
}

.style-preview[data-palette="wine-burgundy"] {
  --accent: #b01445;
  --preview-bg: #fff6f6;
  --preview-surface: rgba(176, 20, 69, 0.12);
  --preview-text: #231016;
  --preview-muted: rgba(35, 16, 22, 0.68);
}

.style-preview[data-palette="sky-blue"] {
  --accent: #20a8dc;
  --preview-bg: #fff;
  --preview-surface: rgba(32, 168, 220, 0.12);
  --preview-text: #101722;
  --preview-muted: rgba(16, 23, 34, 0.68);
}

.style-preview[data-palette="emerald-forest"] {
  --accent: #19bf82;
  --preview-bg: #031b10;
}

.style-preview[data-style="minimal"] {
  --preview-font: "Manrope";
  border-radius: 4px;
  box-shadow: none;
}

.style-preview[data-style="premium"] {
  --preview-font: "Montserrat";
}

.style-preview[data-style="bright"] {
  --preview-font: "Rubik";
  transform: rotate(-0.3deg);
  box-shadow: 0 18px 60px color-mix(in srgb, var(--accent) 22%, transparent);
}

.style-preview[data-style="corporate"] {
  --preview-font: "IBM Plex Sans";
  border-radius: 8px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 12%, transparent), transparent 46%),
    var(--preview-bg);
}

.style-preview span {
  display: block;
  color: var(--accent);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.style-preview h4 {
  margin: 8px 0 6px;
  color: var(--preview-text);
  font-size: clamp(28px, 4vw, 38px);
  font-weight: 900;
  line-height: 0.95;
}

.style-preview p {
  max-width: 500px;
  margin: 0;
  color: var(--preview-muted);
  font-size: 14px;
  font-weight: 600;
}

.style-preview__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.style-preview__actions span {
  border: 1px solid var(--accent);
  border-radius: 10px;
  padding: 13px 18px;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  white-space: nowrap;
}

.style-preview__actions span:last-child {
  background: transparent;
  color: var(--accent);
}

.style-grid {
  display: grid;
  gap: 14px;
}

.builder-stage[data-builder-stage="2"] .builder-group + .builder-group {
  margin-top: 32px;
}

.style-grid--styles {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.style-grid--palettes {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.style-card,
.palette-card {
  position: relative;
  overflow: hidden;
  min-height: 96px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 9px;
  padding: 0 0 14px;
  background: rgba(255, 255, 255, 0.035);
  color: #fff;
  cursor: pointer;
  text-align: left;
  transition:
    border-color 180ms ease,
    background 180ms ease,
    transform 180ms ease,
    box-shadow 180ms ease;
  animation: builder-card-in 420ms ease both;
}

.style-card:nth-child(2),
.palette-card:nth-child(2) { animation-delay: 35ms; }
.style-card:nth-child(3),
.palette-card:nth-child(3) { animation-delay: 70ms; }
.style-card:nth-child(4),
.palette-card:nth-child(4) { animation-delay: 105ms; }
.palette-card:nth-child(5) { animation-delay: 140ms; }
.palette-card:nth-child(6) { animation-delay: 175ms; }
.palette-card:nth-child(7) { animation-delay: 210ms; }
.palette-card:nth-child(8) { animation-delay: 245ms; }
.palette-card:nth-child(9) { animation-delay: 280ms; }
.palette-card:nth-child(10) { animation-delay: 315ms; }
.palette-card:nth-child(11) { animation-delay: 350ms; }
.palette-card:nth-child(12) { animation-delay: 385ms; }
.palette-card:nth-child(13) { animation-delay: 420ms; }
.palette-card:nth-child(14) { animation-delay: 455ms; }

.style-card:hover,
.palette-card:hover,
.style-card.is-selected,
.palette-card.is-selected {
  border-color: var(--red);
  background: rgba(255, 21, 21, 0.055);
  transform: translateY(-4px);
}

.style-card.is-selected,
.palette-card.is-selected {
  box-shadow: 0 14px 34px rgba(255, 21, 21, 0.1);
  animation-name: builder-card-in, builder-select-pop;
  animation-duration: 420ms, 260ms;
}

.style-card.is-selected::after,
.palette-card.is-selected::after {
  position: absolute;
  top: 12px;
  right: 12px;
  color: var(--red);
  content: "✓";
  font-size: 14px;
  font-weight: 900;
}

.style-card__sample {
  display: block;
  height: 50px;
  margin-bottom: 14px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 62% 64%;
}

.style-card__sample--minimal {
  background-color: #f7f7f7;
  background-image: linear-gradient(#111, #111), linear-gradient(#777, #777), linear-gradient(#333, #333);
  background-size: 34% 4%, 44% 4%, 28% 10%;
  background-position: 50% 26%, 50% 42%, 50% 62%;
}

.style-card__sample--premium {
  background-color: #080712;
  background-image: linear-gradient(#d9d9d9, #d9d9d9), linear-gradient(#777, #777), linear-gradient(#b955ff, #b955ff);
  background-size: 34% 4%, 44% 4%, 28% 12%;
  background-position: 50% 26%, 50% 42%, 50% 66%;
}

.style-card__sample--bright {
  background-color: #fff7ef;
  background-image: linear-gradient(#ff5a12, #ff5a12), linear-gradient(#f0b08d, #f0b08d), linear-gradient(#ff5a12, #ff5a12);
  background-size: 34% 4%, 44% 4%, 28% 12%;
  background-position: 50% 26%, 50% 42%, 50% 66%;
}

.style-card__sample--corporate {
  background-color: #f5f7fb;
  background-image: linear-gradient(#213f91, #213f91), linear-gradient(#8da0cf, #8da0cf), linear-gradient(#213f91, #213f91);
  background-size: 34% 4%, 44% 4%, 28% 12%;
  background-position: 50% 26%, 50% 42%, 50% 66%;
}

.style-card[data-style-option="minimal"] {
  font-family: "Manrope", Montserrat, sans-serif;
}

.style-card[data-style-option="premium"] {
  font-family: "Montserrat", sans-serif;
}

.style-card[data-style-option="bright"] {
  font-family: "Rubik", Montserrat, sans-serif;
}

.style-card[data-style-option="corporate"] {
  font-family: "IBM Plex Sans", Montserrat, sans-serif;
}

.style-card strong,
.palette-card strong {
  display: block;
  padding: 0 12px;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
}

.style-card em,
.palette-card em {
  display: block;
  margin-top: 6px;
  padding: 0 12px;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 500;
}

.palette-card span {
  display: block;
  height: 50px;
  margin-bottom: 14px;
  background: linear-gradient(90deg, var(--c1) 0 50%, var(--c2) 50% 100%);
}

.builder-form {
  display: grid;
  gap: 20px;
  margin-top: 28px;
}

.builder-form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.builder-field {
  display: grid;
  gap: 9px;
  text-align: left;
}

.builder-field span {
  color: rgba(255, 255, 255, 0.88);
  font-size: 12px;
  font-weight: 900;
}

.builder-field input,
.builder-field textarea {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 9px;
  padding: 0 18px;
  background: rgba(255, 255, 255, 0.065);
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  outline: none;
  transition:
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease;
}

.builder-field input {
  min-height: 46px;
}

.builder-field textarea {
  min-height: 92px;
  resize: vertical;
  padding-top: 15px;
  line-height: 1.45;
}

.builder-field input::placeholder,
.builder-field textarea::placeholder {
  color: rgba(255, 255, 255, 0.42);
}

.builder-field input:focus,
.builder-field textarea:focus {
  border-color: rgba(255, 21, 21, 0.62);
  background: rgba(255, 255, 255, 0.09);
  box-shadow: 0 0 0 4px rgba(255, 21, 21, 0.09);
  transform: translateY(-1px);
}

.builder-preview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  gap: 24px;
  margin-top: 28px;
}

.builder-preview__screen {
  --accent: #ff1515;
  --preview-base: #050505;
  --preview-line: rgba(255, 255, 255, 0.18);
  --preview-font: "Montserrat";
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 36%),
    var(--preview-base);
  transition:
    border-color 220ms ease,
    background 220ms ease,
    transform 220ms ease;
  animation: builder-preview-in 520ms ease both;
}

.builder-preview__screen:hover {
  transform: translateY(-3px);
}

.builder-preview__screen[data-style="minimal"] { --preview-font: "Manrope"; }
.builder-preview__screen[data-style="premium"] { --preview-font: "Montserrat"; }
.builder-preview__screen[data-style="bright"] { --preview-font: "Rubik"; }
.builder-preview__screen[data-style="corporate"] { --preview-font: "IBM Plex Sans"; }

.builder-preview__screen[data-palette="corporate-blue"] { --accent: #2f6df6; --preview-base: #f5f7fb; --preview-line: rgba(16, 21, 34, 0.18); }
.builder-preview__screen[data-palette="fresh-green"] { --accent: #18a957; --preview-base: #f7f8f4; --preview-line: rgba(17, 27, 20, 0.18); }
.builder-preview__screen[data-palette="premium-purple"] { --accent: #a64df4; --preview-base: #080012; }
.builder-preview__screen[data-palette="warm-orange"] { --accent: #ff5a12; --preview-base: #fff8ef; --preview-line: rgba(33, 20, 13, 0.18); }
.builder-preview__screen[data-palette="minimal-mono"] { --accent: #111; --preview-base: #f7f7f7; --preview-line: rgba(0, 0, 0, 0.18); }
.builder-preview__screen[data-palette="cyber-teal"] { --accent: #23c7b7; --preview-base: #062b28; }
.builder-preview__screen[data-palette="soft-pink"] { --accent: #e74596; --preview-base: #fff1f6; --preview-line: rgba(35, 18, 27, 0.18); }
.builder-preview__screen[data-palette="luxury-gold"] { --accent: #d9b93d; }
.builder-preview__screen[data-palette="ocean-navy"] { --accent: #213f91; --preview-base: #f5f7fb; --preview-line: rgba(16, 21, 34, 0.18); }
.builder-preview__screen[data-palette="neon-lime"] { --accent: #9beb2f; }
.builder-preview__screen[data-palette="wine-burgundy"] { --accent: #b01445; --preview-base: #fff6f6; --preview-line: rgba(35, 16, 22, 0.18); }
.builder-preview__screen[data-palette="sky-blue"] { --accent: #20a8dc; --preview-base: #fff; --preview-line: rgba(16, 23, 34, 0.18); }
.builder-preview__screen[data-palette="emerald-forest"] { --accent: #19bf82; --preview-base: #031b10; }

.builder-preview__browser {
  display: flex;
  height: 32px;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  background: rgba(255, 255, 255, 0.08);
}

.builder-preview__browser span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
}

.builder-preview__browser span:nth-child(2) {
  background: rgba(255, 255, 255, 0.48);
}

.builder-preview__browser span:nth-child(3) {
  background: rgba(255, 255, 255, 0.28);
}

.builder-preview__browser em {
  flex: 1;
  overflow: hidden;
  border-radius: 999px;
  margin-left: 10px;
  padding: 4px 12px;
  background: rgba(255, 255, 255, 0.09);
  color: rgba(255, 255, 255, 0.52);
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.builder-preview__blocks {
  display: grid;
  gap: 12px;
  padding: 12px;
  font-family: var(--preview-font), Montserrat, sans-serif;
}

.builder-wire {
  position: relative;
  overflow: hidden;
  min-height: 74px;
  border: 1px solid var(--preview-line);
  border-radius: 8px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 9%, transparent), transparent),
    rgba(255, 255, 255, 0.025);
  animation: preview-block-in 260ms ease both;
}

.builder-wire__label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px 0;
  color: rgba(255, 255, 255, 0.58);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.builder-wire__label span {
  color: var(--accent);
}

.builder-wire__canvas {
  position: absolute;
  inset: 26px 12px 12px;
  background-repeat: no-repeat;
}

.builder-wire--hero {
  min-height: 100px;
}

.builder-wire--hero .builder-wire__canvas {
  background-image:
    linear-gradient(var(--accent), var(--accent)),
    linear-gradient(#d8d8d8, #d8d8d8),
    linear-gradient(#858585, #858585),
    linear-gradient(var(--accent), var(--accent)),
    linear-gradient(90deg, var(--accent) 52%, transparent 52%);
  background-size: 26% 6px, 78% 8px, 58% 5px, 22% 18px, 34% 18px;
  background-position: 50% 5%, 50% 28%, 50% 46%, 46% 74%, 52% 74%;
}

.builder-wire--form .builder-wire__canvas {
  background-image:
    linear-gradient(var(--preview-line), var(--preview-line)),
    linear-gradient(var(--preview-line), var(--preview-line)),
    linear-gradient(var(--preview-line), var(--preview-line)),
    linear-gradient(var(--accent), var(--accent));
  background-size: 48% 12px, 48% 12px, 98% 14px, 48% 14px;
  background-position: 0 8px, 100% 8px, 0 30px, 0 56px;
}

.builder-wire--footer .builder-wire__canvas,
.builder-wire--default .builder-wire__canvas {
  background-image:
    linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--preview-line), var(--preview-line)),
    linear-gradient(var(--preview-line), var(--preview-line)),
    linear-gradient(var(--preview-line), var(--preview-line));
  background-size: 18% 5px, 34% 4px, 42% 4px, 30% 4px;
  background-position: 0 10px, 26% 22px, 26% 36px, 70% 22px;
}

.builder-wire--faq .builder-wire__canvas,
.builder-wire--process .builder-wire__canvas,
.builder-wire--compare .builder-wire__canvas {
  background-image:
    linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--preview-line), var(--preview-line)),
    linear-gradient(var(--preview-line), var(--preview-line)),
    linear-gradient(var(--preview-line), var(--preview-line));
  background-size: 98% 10px, 92% 5px, 74% 5px, 88% 5px;
  background-position: 0 8px, 0 28px, 0 45px, 0 62px;
}

.builder-wire--stats .builder-wire__canvas,
.builder-wire--services .builder-wire__canvas,
.builder-wire--pricing .builder-wire__canvas,
.builder-wire--features .builder-wire__canvas {
  background-image:
    linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--preview-line), var(--preview-line)),
    linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--preview-line), var(--preview-line)),
    linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--preview-line), var(--preview-line));
  background-size: 16% 16px, 22% 4px, 16% 16px, 22% 4px, 16% 16px, 22% 4px;
  background-position: 10% 26px, 10% 48px, 42% 26px, 42% 48px, 74% 26px, 74% 48px;
}

.builder-preview__summary {
  display: grid;
  align-content: start;
  gap: 14px;
}

.builder-summary-card {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 18px;
  background: rgba(255, 255, 255, 0.035);
  animation: builder-card-in 420ms ease both;
  transition:
    border-color 180ms ease,
    background 180ms ease,
    transform 180ms ease;
}

.builder-summary-card:nth-child(2) { animation-delay: 45ms; }
.builder-summary-card:nth-child(3) { animation-delay: 90ms; }
.builder-summary-card:nth-child(4) { animation-delay: 135ms; }
.builder-summary-card:nth-child(5) { animation-delay: 180ms; }

.builder-summary-card:hover {
  border-color: rgba(255, 21, 21, 0.32);
  background: rgba(255, 21, 21, 0.055);
  transform: translateY(-3px);
}

.builder-summary-card span {
  display: block;
  color: rgba(255, 255, 255, 0.46);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.builder-summary-card strong {
  display: block;
  margin-top: 9px;
  color: #fff;
  font-size: 18px;
  font-weight: 900;
}

.builder-summary-card--price {
  border-color: rgba(255, 21, 21, 0.42);
  background: rgba(255, 21, 21, 0.075);
}

.builder-summary-card--price strong {
  color: #fff;
  font-size: 30px;
  line-height: 1;
}

.builder-summary-card em {
  display: block;
  margin-top: 7px;
  color: rgba(255, 255, 255, 0.56);
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
}

.builder-summary-swatches {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.builder-summary-swatches i {
  display: block;
  width: 18px;
  height: 18px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  background: #050505;
}

.builder-summary-swatches i:last-child {
  background: var(--red);
}

.builder-final {
  display: grid;
  gap: 22px;
}

.builder-final__bar {
  overflow: hidden;
  border: 1px solid rgba(255, 21, 21, 0.5);
  border-radius: 10px;
  padding: 16px 18px;
  background: rgba(255, 21, 21, 0.045);
  animation: builder-rise 420ms ease both;
}

.builder-final__bar span {
  display: block;
  color: var(--red);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
}

.builder-final__bar i {
  display: block;
  height: 7px;
  border-radius: 999px;
  margin-top: 12px;
  background:
    linear-gradient(90deg, var(--red) 0 97%, rgba(255, 255, 255, 0.08) 97% 100%);
  animation: builder-final-progress 1.2s ease both;
}

.builder-contact-form {
  display: grid;
  gap: 20px;
}

.builder-final__perks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.builder-final__perks div {
  display: flex;
  min-height: 118px;
  align-items: center;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
  border: 1px solid rgba(255, 21, 21, 0.38);
  border-radius: 9px;
  padding: 18px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 21, 21, 0.18), transparent 58%),
    rgba(255, 21, 21, 0.07);
  text-align: center;
  animation: builder-card-in 420ms ease both;
  transition:
    border-color 180ms ease,
    background 180ms ease,
    transform 180ms ease;
}

.builder-final__perks div:nth-child(2) { animation-delay: 70ms; }
.builder-final__perks div:nth-child(3) { animation-delay: 140ms; }

.builder-final__perks div:hover {
  border-color: rgba(255, 21, 21, 0.62);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 21, 21, 0.24), transparent 58%),
    rgba(255, 21, 21, 0.1);
  transform: translateY(-3px);
}

.builder-final__perks span {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 8px;
  background: rgba(255, 21, 21, 0.11);
  color: var(--red);
}

.builder-final__perks svg {
  width: 15px;
  height: 15px;
}

.builder-final__perks strong {
  display: block;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.15;
}

.builder-final__perks em {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.35;
}

.builder-final__note {
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 9px;
  padding: 13px 16px;
  color: rgba(255, 255, 255, 0.58);
  font-size: 11px;
  font-weight: 600;
  text-align: center;
}

.builder-success {
  display: grid;
  justify-items: center;
  border: 1px solid rgba(255, 21, 21, 0.42);
  border-radius: 14px;
  padding: clamp(34px, 5vw, 58px);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 21, 21, 0.2), transparent 48%),
    rgba(255, 21, 21, 0.065);
  text-align: center;
  animation: builder-stage-in 320ms ease both;
}

.builder-success[hidden] {
  display: none;
}

.builder-success span {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  box-shadow: 0 18px 42px rgba(255, 21, 21, 0.25);
}

.builder-success svg {
  width: 30px;
  height: 30px;
  stroke-width: 3;
}

.builder-success h3 {
  margin: 22px 0 0;
  color: #fff;
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 900;
  line-height: 1;
}

.builder-success p {
  max-width: 720px;
  margin: 16px auto 0;
  color: var(--muted);
  font-size: clamp(15px, 1.4vw, 18px);
  font-weight: 600;
  line-height: 1.5;
}

@keyframes preview-block-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes builder-preview-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.99);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes builder-final-progress {
  from {
    clip-path: inset(0 100% 0 0);
  }

  to {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes preview-pop {
  0% {
    opacity: 0.72;
    transform: translateY(8px) scale(0.985);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.builder-panel__actions {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin-top: 36px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 24px;
}

.builder-nav {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  border-radius: 10px;
  padding: 0 24px;
  background: linear-gradient(180deg, #b10d0d, #8e0909);
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
  transition:
    filter 180ms ease,
    transform 180ms ease;
}

.builder-nav svg {
  width: 17px;
  height: 17px;
}

.builder-nav:hover {
  filter: brightness(1.1);
  transform: translateY(-2px);
}

.builder-nav--ghost {
  background: rgba(255, 255, 255, 0.055);
  color: rgba(255, 255, 255, 0.78);
}

.builder-nav:disabled {
  background: rgba(255, 255, 255, 0.055);
  color: rgba(255, 255, 255, 0.42);
  cursor: default;
  filter: none;
}

@media (max-width: 920px) {
  .builder-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .builder-preview {
    grid-template-columns: 1fr;
  }

  .builder-preview__summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .builder-final__perks {
    grid-template-columns: 1fr;
  }

  .style-grid--styles,
  .style-grid--palettes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .builder-steps {
    gap: 10px;
  }

  .builder-step::before {
    display: none;
  }
}

@media (max-width: 620px) {
  .builder-hero h2 {
    font-size: clamp(40px, 13vw, 56px);
  }

  .builder-steps {
    grid-template-columns: repeat(5, 1fr);
  }

  .builder-step {
    gap: 8px;
    font-size: 9px;
  }

  .builder-step span {
    width: 38px;
    height: 38px;
  }

  .builder-step svg {
    width: 17px;
    height: 17px;
  }

  .builder-panel__head {
    align-items: stretch;
    flex-direction: column;
  }

  .builder-counter {
    width: 100%;
    grid-template-columns: auto auto;
    justify-content: center;
    gap: 10px;
  }

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

  .builder-form__row {
    grid-template-columns: 1fr;
  }

  .style-preview {
    align-items: flex-start;
    flex-direction: column;
    padding: 22px;
  }

  .style-preview__actions {
    width: 100%;
    justify-content: flex-start;
  }

  .style-grid--styles,
  .style-grid--palettes {
    grid-template-columns: 1fr;
  }

  .builder-preview__summary {
    grid-template-columns: 1fr;
  }

  .builder-panel__actions {
    flex-direction: column;
  }

  .builder-nav {
    width: 100%;
  }
}

.packages {
  position: relative;
  overflow: hidden;
  padding: clamp(52px, 7vw, 88px) clamp(18px, 5vw, 72px);
  background:
    radial-gradient(circle at 44% 0%, rgba(255, 21, 21, 0.14), transparent 30%),
    radial-gradient(circle at 82% 78%, rgba(255, 255, 255, 0.045), transparent 24%),
    #030303;
  text-align: center;
}

.packages::before {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
  background-size: 96px 96px;
  content: "";
  mask-image: linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent);
  pointer-events: none;
}

.packages__grid {
  position: relative;
  z-index: 2;
  display: grid;
  width: min(1150px, 100%);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  margin: clamp(42px, 6vw, 70px) auto 0;
  text-align: left;
}

.package-card {
  position: relative;
  overflow: hidden;
  min-height: 492px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  padding: clamp(28px, 4vw, 38px);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), transparent 62%),
    rgba(255, 255, 255, 0.035);
  animation: fade-up 700ms ease both;
  transition:
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.package-card::before {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 18% 0%, rgba(255, 21, 21, 0.15), transparent 42%);
  content: "";
  opacity: 0;
  transition: opacity 180ms ease;
}

.package-card:hover {
  border-color: rgba(255, 21, 21, 0.42);
  background:
    linear-gradient(180deg, rgba(255, 21, 21, 0.08), transparent 62%),
    rgba(255, 255, 255, 0.05);
  box-shadow: 0 28px 74px rgba(255, 21, 21, 0.12);
  transform: translateY(-7px);
}

.package-card:hover::before {
  opacity: 1;
}

.package-card--primary {
  border-color: rgba(255, 21, 21, 0.36);
}

.package-card__badge {
  position: absolute;
  top: -1px;
  right: 28px;
  z-index: 2;
  border-radius: 0 0 10px 10px;
  padding: 10px 16px;
  background: var(--red);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.package-card h3,
.package-card__price,
.package-card ul {
  position: relative;
  z-index: 2;
}

.package-card h3 {
  margin: 0;
  color: #fff;
  font-size: clamp(24px, 2.6vw, 30px);
  font-weight: 900;
}

.package-card__price {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px;
  margin-top: 12px;
}

.package-card__price strong {
  color: #fff;
  font-size: clamp(44px, 5vw, 58px);
  font-weight: 900;
  line-height: 0.95;
}

.package-card__price span {
  color: var(--muted);
  font-size: 15px;
  font-weight: 600;
}

.package-card ul {
  display: grid;
  gap: 18px;
  margin: 36px 0 0;
  padding: 0;
  color: var(--muted);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.35;
  list-style: none;
}

.package-card li {
  position: relative;
  padding-left: 30px;
}

.package-card li::before {
  position: absolute;
  left: 0;
  top: 0;
  color: var(--red);
  content: "✓";
  font-weight: 900;
}

.packages__button {
  position: relative;
  z-index: 2;
  display: inline-flex;
  min-height: 70px;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: clamp(36px, 5vw, 58px) auto 0;
  border-radius: 12px;
  padding: 0 38px;
  background: var(--red);
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 18px;
  font-weight: 900;
  box-shadow: 0 22px 46px rgba(255, 21, 21, 0.24);
  transition:
    background 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.packages__button:hover {
  background: #ff3030;
  box-shadow: 0 28px 64px rgba(255, 21, 21, 0.34);
  transform: translateY(-3px);
}

@media (max-width: 860px) {
  .packages__grid {
    grid-template-columns: 1fr;
  }

  .package-card {
    min-height: auto;
  }
}

@media (max-width: 520px) {
  .package-card {
    padding: 24px;
  }

  .package-card__badge {
    right: 20px;
  }

  .packages__button {
    width: min(320px, 100%);
    min-height: 56px;
    gap: 10px;
    padding: 0 20px;
    border-radius: 10px;
    font-size: 14px;
  }
}

.compare {
  position: relative;
  overflow: hidden;
  padding: clamp(52px, 7vw, 88px) clamp(18px, 5vw, 72px);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 21, 21, 0.11), transparent 30%),
    #030303;
}

@keyframes reviews-scroll {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-50%);
  }
}

.guarantee {
  position: relative;
  overflow: hidden;
  padding: clamp(56px, 8vw, 96px) clamp(18px, 5vw, 72px);
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 21, 21, 0.12), transparent 32%),
    #030303;
}

.guarantee::before {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
  background-size: 96px 96px;
  content: "";
  mask-image: linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent);
  pointer-events: none;
}

.guarantee-card {
  position: relative;
  z-index: 2;
  width: min(864px, 100%);
  margin: 0 auto;
  border: 1px solid rgba(255, 21, 21, 0.34);
  border-radius: 20px;
  padding: clamp(42px, 7vw, 70px) clamp(22px, 6vw, 64px);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 21, 21, 0.12), transparent 42%),
    rgba(255, 255, 255, 0.035);
  text-align: center;
  animation: fade-up 700ms ease both;
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.guarantee-card:hover {
  border-color: rgba(255, 21, 21, 0.54);
  box-shadow: 0 28px 78px rgba(255, 21, 21, 0.13);
  transform: translateY(-6px);
}

.guarantee-card__icon {
  display: grid;
  width: 72px;
  height: 72px;
  place-items: center;
  margin: 0 auto 30px;
  border: 1px solid rgba(255, 21, 21, 0.38);
  border-radius: 50%;
  background: rgba(255, 21, 21, 0.08);
}

.guarantee-card__icon svg,
.guarantee-card__mark svg {
  color: var(--red);
  stroke-width: 2.4;
}

.guarantee-card__icon svg {
  width: 34px;
  height: 34px;
}

.guarantee-card h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.08;
}

.guarantee-card p {
  max-width: 600px;
  margin: 22px auto 0;
  color: var(--muted);
  font-size: clamp(17px, 1.6vw, 21px);
  font-weight: 500;
  line-height: 1.5;
}

.guarantee-card__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 34px;
  color: var(--red);
  font-size: 16px;
  font-weight: 900;
}

.reviews {
  position: relative;
  overflow: hidden;
  padding: clamp(56px, 8vw, 96px) clamp(18px, 5vw, 72px);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 21, 21, 0.12), transparent 30%),
    radial-gradient(circle at 12% 76%, rgba(255, 255, 255, 0.045), transparent 24%),
    #030303;
}

.portfolio {
  position: relative;
  overflow: hidden;
  padding: clamp(56px, 8vw, 96px) clamp(18px, 5vw, 72px);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 21, 21, 0.12), transparent 30%),
    radial-gradient(circle at 12% 82%, rgba(255, 255, 255, 0.045), transparent 22%),
    #030303;
}

.final-cta {
  position: relative;
  overflow: hidden;
  padding: clamp(60px, 8vw, 102px) clamp(18px, 5vw, 72px);
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 21, 21, 0.16), transparent 34%),
    #030303;
  text-align: center;
}

.final-cta::before {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
  background-size: 96px 96px;
  content: "";
  mask-image: linear-gradient(180deg, transparent, #000 18%, #000 80%, transparent);
  pointer-events: none;
}

.final-cta__inner {
  position: relative;
  z-index: 2;
  width: min(900px, 100%);
  margin: 0 auto;
  animation: fade-up 700ms ease both;
}

.final-cta h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(38px, 6vw, 64px);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 0.98;
}

.final-cta p {
  margin: 26px auto 0;
  color: var(--muted);
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 500;
  line-height: 1.45;
}

.final-cta a {
  display: inline-flex;
  min-height: 78px;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 46px;
  border-radius: 12px;
  padding: 0 40px;
  background: var(--red);
  color: #fff;
  text-decoration: none;
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 900;
  box-shadow: 0 24px 54px rgba(255, 21, 21, 0.26);
  transition:
    background 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.final-cta a:hover {
  background: #ff3030;
  box-shadow: 0 30px 72px rgba(255, 21, 21, 0.36);
  transform: translateY(-3px);
}

.modal-open {
  overflow: hidden;
}

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

.booking-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 18px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 220ms ease,
    visibility 220ms ease;
}

.booking-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.booking-modal__backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 21, 21, 0.08), transparent 26%),
    rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(10px);
}

.booking-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(500px, 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;
  padding: 24px;
  text-align: center;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0)),
    radial-gradient(circle at 50% 0%, rgba(255, 21, 21, 0.1), transparent 38%),
    rgba(11, 11, 11, 0.96);
  box-shadow:
    0 28px 90px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
  transform: translateY(16px) scale(0.98);
  transition: transform 220ms ease;
}

.booking-modal.is-open .booking-modal__dialog {
  transform: translateY(0) scale(1);
}

.booking-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
}

.booking-modal__close span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
}

.booking-modal__close span:first-child {
  transform: translate(-50%, -50%) rotate(45deg);
}

.booking-modal__close span:last-child {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.booking-modal__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 16px;
  border: 1px solid rgba(255, 21, 21, 0.36);
  border-radius: 999px;
  color: var(--red);
  font-size: 14px;
  font-weight: 800;
}

.booking-modal h2 {
  margin: 18px auto 10px;
  max-width: 430px;
  font-size: clamp(34px, 4.2vw, 46px);
  line-height: 0.98;
}

.booking-modal p {
  margin: 0;
  color: rgba(255, 255, 255, 0.66);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.55;
}

.booking-form {
  display: grid;
  gap: 14px;
  margin-top: 24px;
  text-align: left;
}

.booking-form__field {
  display: block;
}

.booking-form__field input,
.booking-form__field textarea {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 17px 18px 16px;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font: inherit;
  resize: vertical;
  outline: none;
  transition:
    border-color 180ms ease,
    background-color 180ms ease,
    box-shadow 180ms ease;
}

.booking-form__field input::placeholder,
.booking-form__field textarea::placeholder {
  color: rgba(255, 255, 255, 0.56);
}

.booking-form__field input:focus,
.booking-form__field textarea:focus {
  border-color: rgba(255, 21, 21, 0.5);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 0 4px rgba(255, 21, 21, 0.12);
}

.booking-form__field textarea {
  min-height: 116px;
}

.booking-form__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 62px;
  width: 100%;
  border: 0;
  border-radius: 18px;
  background: linear-gradient(180deg, #b10d0d, #8e0909);
  color: #fff;
  font: inherit;
  font-size: 18px;
  font-weight: 900;
  cursor: pointer;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    filter 180ms ease;
}

.booking-form__submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 42px rgba(255, 21, 21, 0.22);
  filter: brightness(1.08);
}

.booking-modal__note {
  display: block;
  margin-top: 14px;
  color: rgba(255, 255, 255, 0.46);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.55;
}

.project-modal {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  padding: 18px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 220ms ease,
    visibility 220ms ease;
}

.project-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.project-modal__backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 16%, rgba(255, 21, 21, 0.1), transparent 30%),
    rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(10px);
}

.project-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(1760px, calc(100vw - 36px));
  height: min(940px, calc(100vh - 36px));
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 22px;
  background: #f7f7f4;
  box-shadow: 0 34px 120px rgba(0, 0, 0, 0.62);
  transform: translateY(18px) scale(0.985);
  transition: transform 220ms ease;
}

.project-modal.is-open .project-modal__dialog {
  transform: translateY(0) scale(1);
}

.project-modal__close {
  position: absolute;
  top: 22px;
  right: 22px;
  z-index: 3;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.14);
  cursor: pointer;
  transition:
    transform 180ms ease,
    background 180ms ease;
}

.project-modal__close:hover {
  background: #fff;
  transform: scale(1.05);
}

.project-modal__close span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 2px;
  border-radius: 999px;
  background: #151515;
}

.project-modal__close span:first-child {
  transform: translate(-50%, -50%) rotate(45deg);
}

.project-modal__close span:last-child {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.project-modal__frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #f7f7f4;
}

@media (max-width: 520px) {
  .final-cta a {
    width: 100%;
    padding: 0 18px;
  }

  .booking-modal {
    padding: 12px;
  }

  .booking-modal__dialog {
    max-height: calc(100vh - 24px);
    overflow-y: auto;
    border-radius: 22px;
    padding: 20px 16px 18px;
  }

  .booking-modal h2 {
    margin-top: 16px;
    font-size: 28px;
  }

  .booking-form {
    gap: 12px;
    margin-top: 18px;
  }

  .booking-form__field input,
  .booking-form__field textarea {
    padding: 18px 16px;
    border-radius: 16px;
  }

  .booking-form__submit {
    min-height: 58px;
    font-size: 17px;
  }
}

.portfolio::before {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
  background-size: 96px 96px;
  content: "";
  mask-image: linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent);
  pointer-events: none;
}

.portfolio__grid {
  position: relative;
  z-index: 2;
  display: grid;
  width: min(1180px, 100%);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin: clamp(42px, 6vw, 70px) auto 0;
  justify-items: center;
}

.portfolio-card {
  position: relative;
  overflow: hidden;
  min-height: 430px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 21, 21, 0.055), rgba(255, 21, 21, 0.035) 58%, rgba(255, 21, 21, 0.02) 100%),
    rgba(255, 255, 255, 0.04);
  animation: fade-up 700ms ease both;
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.portfolio-card--wide {
  min-height: 430px;
}

.portfolio-card--project {
  width: 100%;
  cursor: pointer;
}

.portfolio-card--project:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  width: calc((100% - 24px) / 2);
  justify-self: center;
}

.portfolio-card:hover {
  border-color: rgba(255, 21, 21, 0.42);
  box-shadow: 0 26px 70px rgba(255, 21, 21, 0.12);
  transform: translateY(-7px);
}

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

.portfolio.is-expanded .portfolio-card--hidden {
  display: block;
}

.portfolio-card img {
  display: block;
  width: 100%;
  height: 250px;
  object-fit: cover;
  filter: saturate(0.9);
  transition:
    filter 180ms ease,
    transform 240ms ease;
}

.portfolio-card:hover img {
  filter: saturate(1.1);
  transform: scale(1.03);
}

.portfolio-card--project img {
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  object-position: center;
  background: #222421;
}

.portfolio-card > div {
  position: relative;
  padding: 18px;
  background: transparent;
}

.portfolio-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
}

.portfolio-card .portfolio-card__tags span {
  display: inline-flex;
  border: 1px solid rgba(255, 21, 21, 0.34);
  border-radius: 999px;
  padding: 5px 9px;
  color: var(--red);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.portfolio-card .portfolio-card__tags span + span {
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--muted);
  text-transform: none;
}

.portfolio-card h3 {
  margin: 13px 0 0;
  color: #fff;
  font-size: 18px;
  font-weight: 900;
}

.portfolio-card p {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
}

.portfolio-card__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  margin-top: 20px;
  padding: 0;
}

.portfolio-card__bottom strong {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  border: 1px solid rgba(255, 21, 21, 0.34);
  border-radius: 10px;
  padding: 0 12px;
  background:
    linear-gradient(180deg, rgba(255, 21, 21, 0.1), transparent),
    rgba(255, 21, 21, 0.045);
  color: var(--red);
  font-size: 12px;
  font-weight: 900;
}

.portfolio-card__bottom a {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  border-radius: 10px;
  padding: 0;
  color: var(--red);
  font-size: 13px;
  font-weight: 900;
  text-decoration: none;
  transition:
    color 180ms ease,
    transform 180ms ease;
}

.portfolio-card__bottom a:hover {
  background: rgba(255, 21, 21, 0.08);
  color: #ff4a4a;
  transform: translateX(3px);
}

.portfolio__more {
  position: relative;
  z-index: 2;
  display: inline-flex;
  width: fit-content;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  margin: 34px auto 0;
  border: 1px solid rgba(255, 21, 21, 0.4);
  border-radius: 12px;
  padding: 0 24px;
  background:
    linear-gradient(180deg, rgba(255, 21, 21, 0.12), rgba(255, 21, 21, 0.04)),
    rgba(255, 255, 255, 0.035);
  color: var(--red);
  font: inherit;
  font-size: 15px;
  font-weight: 900;
  cursor: pointer;
  transition:
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.portfolio > .portfolio__more {
  left: 50%;
  transform: translateX(-50%);
}

.portfolio__more:hover {
  border-color: rgba(255, 21, 21, 0.64);
  background:
    linear-gradient(180deg, rgba(255, 21, 21, 0.18), rgba(255, 21, 21, 0.07)),
    rgba(255, 255, 255, 0.05);
  box-shadow: 0 18px 44px rgba(255, 21, 21, 0.12);
  transform: translateX(-50%) translateY(-2px);
}

.portfolio.is-expanded .portfolio__more {
  display: none;
}

@media (max-width: 980px) {
  .portfolio__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .portfolio__grid {
    grid-template-columns: 1fr;
  }

  .portfolio-card,
  .portfolio-card--wide {
    grid-column: auto;
    min-height: auto;
  }

  .portfolio-card--project:last-child:nth-child(odd) {
    grid-column: auto;
    width: 100%;
  }

  .portfolio-card img,
  .portfolio-card--wide img {
    height: 210px;
  }
}

.reviews::before {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
  background-size: 96px 96px;
  content: "";
  mask-image: linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent);
  pointer-events: none;
}

.reviews__columns {
  position: relative;
  z-index: 2;
  display: grid;
  width: min(980px, 100%);
  height: 650px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin: clamp(42px, 6vw, 70px) auto 0;
  overflow: hidden;
  mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
}

.reviews__column {
  overflow: hidden;
}

.reviews__track {
  display: grid;
  gap: 18px;
  padding-bottom: 18px;
}

.reviews__track::after {
  display: contents;
  content: "";
}

.reviews__column .reviews__track {
  animation: reviews-scroll 28s linear infinite;
}

.reviews__column--fast .reviews__track {
  animation-duration: 22s;
  animation-direction: reverse;
}

.reviews__column:hover .reviews__track {
  animation-play-state: paused;
}

.reviews__track {
  --repeat-count: 1;
}

.reviews__track > article:nth-child(n) {
  min-height: 0;
}

.reviews__track > article:nth-child(4) {
  margin-bottom: 18px;
}

.reviews__track > article:nth-child(-n + 4) {
  order: 0;
}

.reviews__track > article:nth-child(n + 5) {
  order: 1;
}

.review-card {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 24px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), transparent 62%),
    rgba(255, 255, 255, 0.04);
  animation: fade-up 700ms ease both;
  transition:
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.review-card:hover {
  border-color: rgba(255, 21, 21, 0.42);
  box-shadow: 0 24px 62px rgba(255, 21, 21, 0.12);
  transform: translateY(-5px);
}

.review-card--accent {
  border-color: rgba(255, 21, 21, 0.34);
  background:
    radial-gradient(circle at 20% 0%, rgba(255, 21, 21, 0.14), transparent 42%),
    rgba(255, 21, 21, 0.07);
}

.review-card p {
  margin: 0;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.55;
}

.review-card div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
  margin-top: 20px;
}

.review-card strong {
  color: #fff;
  font-size: 14px;
  font-weight: 900;
}

.review-card span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
}

.review-card small {
  display: block;
  margin-top: 16px;
  color: var(--red);
  font-size: 15px;
  letter-spacing: 2px;
}

@media (min-width: 701px) {
  .reviews__track {
    grid-template-rows: repeat(8, auto);
  }

  .reviews__track article:nth-child(1),
  .reviews__track article:nth-child(2),
  .reviews__track article:nth-child(3),
  .reviews__track article:nth-child(4) {
    display: block;
  }
}

@media (max-width: 700px) {
  .reviews__columns {
    height: auto;
    grid-template-columns: 1fr;
    overflow: visible;
    mask-image: none;
  }

  .reviews__column {
    overflow: visible;
  }

  .reviews__column--fast {
    display: none;
  }

  .reviews__column .reviews__track {
    animation: none;
  }

  .review-card[aria-hidden="true"] {
    display: none;
  }
}

.guarantee-card__mark svg {
  width: 20px;
  height: 20px;
}

@media (max-width: 520px) {
  .guarantee-card {
    border-radius: 16px;
  }

  .guarantee-card__mark {
    align-items: flex-start;
    text-align: left;
  }
}

.compare::before {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
  background-size: 96px 96px;
  content: "";
  mask-image: linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent);
  pointer-events: none;
}

.compare-table {
  position: relative;
  z-index: 2;
  width: min(1150px, 100%);
  min-width: 760px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  margin: clamp(38px, 5vw, 56px) auto 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 42%),
    rgba(8, 8, 8, 0.94);
  backdrop-filter: blur(10px);
  animation: fade-up 700ms ease both;
}

.compare-row {
  display: grid;
  grid-template-columns: 1.28fr 0.92fr 0.92fr 0.92fr;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.compare-row:first-child {
  border-top: 0;
}

.compare-row > div {
  min-height: 56px;
  display: flex;
  align-items: center;
  padding: 0 18px;
  color: var(--muted);
  font-size: 16px;
  font-weight: 500;
}

.compare-row > div:not(:first-child) {
  justify-content: center;
  text-align: center;
}

.compare-row--head > div {
  color: #fff;
  font-weight: 800;
}

.compare-row--head > div:nth-child(2) {
  color: var(--red);
}

.compare-row .is-accent,
.compare-row .is-check {
  color: var(--red);
  font-weight: 900;
}

.compare-row .is-muted {
  color: rgba(255, 255, 255, 0.32);
  font-weight: 900;
}

@media (max-width: 820px) {
  .compare-table {
    width: 100%;
    min-width: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    backdrop-filter: none;
    display: grid;
    gap: 12px;
  }

  .compare-row {
    display: grid;
    grid-template-columns: 1fr;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 52%),
      rgba(255, 255, 255, 0.035);
  }

  .compare-row--head {
    display: none;
  }

  .compare-row:first-child {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

  .compare-row > div {
    min-height: auto;
    padding: 13px 16px;
    font-size: 14px;
  }

  .compare-row > div:first-child {
    justify-content: flex-start;
    background: rgba(255, 21, 21, 0.055);
    color: #fff;
    font-size: 16px;
    font-weight: 900;
  }

  .compare-row > div:not(:first-child) {
    justify-content: space-between;
    gap: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.075);
    text-align: right;
  }

  .compare-row > div:not(:first-child)::before {
    content: attr(data-label);
    color: rgba(255, 255, 255, 0.48);
    font-size: 12px;
    font-weight: 800;
    text-align: left;
    text-transform: uppercase;
  }
}

.footer {
  position: relative;
  overflow: hidden;
  padding: 44px clamp(18px, 5vw, 72px) 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: #030303;
}

.footer::before {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(255, 21, 21, 0.1), transparent 34%);
  content: "";
  pointer-events: none;
}

.footer__inner {
  position: relative;
  z-index: 2;
  display: grid;
  width: min(1180px, 100%);
  grid-template-columns: minmax(260px, 1fr) minmax(680px, auto) minmax(260px, 1fr);
  gap: 24px;
  align-items: start;
  margin: 0 auto;
}

.footer__brand p {
  max-width: 330px;
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
}

.footer__nav {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 12px 18px;
  padding-top: 30px;
}

.footer__nav a {
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 180ms ease;
  white-space: nowrap;
}

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

.footer__contacts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  align-items: center;
  justify-content: flex-end;
  justify-self: end;
}

.footer__contacts a {
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  transition: color 180ms ease;
}

.footer__contacts a:hover {
  color: var(--red);
}

.footer__bottom {
  position: relative;
  z-index: 2;
  display: flex;
  width: min(760px, 100%);
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 18px;
  margin: 34px auto 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 22px;
  color: rgba(255, 255, 255, 0.48);
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 18px;
}

.footer__legal a {
  color: rgba(255, 255, 255, 0.56);
  text-decoration: none;
  transition: color 180ms ease;
}

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

@media (max-width: 820px) {
  .footer__inner {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .footer__nav {
    display: none;
  }
}

@media (max-width: 520px) {
  .footer {
    padding: 34px 18px 22px;
  }

  .footer__inner {
    gap: 24px;
  }

  .footer__brand p {
    max-width: 100%;
    margin-top: 14px;
    font-size: 13px;
  }

  .footer__contacts {
    gap: 8px 14px;
    justify-content: center;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 18px;
  }

  .footer__contacts a {
    font-size: 13px;
  }

  .footer__bottom {
    align-items: center;
    gap: 14px;
    margin-top: 24px;
    padding-top: 18px;
  }

  .footer__legal {
    justify-content: center;
    gap: 10px 14px;
  }

  .footer__legal a {
    font-size: 12px;
  }
}

.quick-facts::before,
.process::before,
.benefits::before,
.site-builder::before,
.packages::before,
.compare::before,
.guarantee::before,
.reviews::before,
.portfolio::before,
.final-cta::before {
  background:
    linear-gradient(180deg, #030303 0%, rgba(3, 3, 3, 0.82) 12%, transparent 34%, transparent 68%, rgba(3, 3, 3, 0.76) 88%, #030303 100%),
    radial-gradient(circle at 50% 18%, rgba(255, 21, 21, 0.105), transparent 38%),
    radial-gradient(circle at 16% 78%, rgba(255, 21, 21, 0.055), transparent 30%),
    linear-gradient(rgba(255, 255, 255, 0.008) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.008) 1px, transparent 1px) !important;
  background-size:
    100% 100%,
    100% 100%,
    100% 100%,
    128px 128px,
    128px 128px !important;
  mask-image: none !important;
}

.quick-facts,
.process,
.benefits,
.site-builder,
.packages,
.compare,
.guarantee,
.reviews,
.portfolio,
.final-cta {
  background-color: transparent;
}

@media (max-height: 760px) and (min-width: 981px) {
  .site-header {
    top: 12px;
    min-height: 56px;
  }

  .hero {
    padding-top: 84px;
    padding-bottom: 22px;
  }

  .kicker {
    margin-bottom: 14px;
  }

  h1 {
    font-size: clamp(42px, 5.7vw, 76px);
  }

  .lead {
    margin-top: 16px;
    font-size: clamp(15px, 1.25vw, 18px);
  }

  .actions {
    margin-top: 22px;
  }

  .stats {
    margin-top: 22px;
  }

  .stats li {
    min-height: 106px;
  }

  .hero__visual {
    min-height: 404px;
  }

  .browser {
    width: min(438px, 100%);
  }

  .mini-hero {
    min-height: 148px;
  }

  .cards article {
    min-height: 74px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}

/* Light copy theme */
.theme-light {
  --bg: #f7f5f1;
  --text: #151515;
  --muted: #64666d;
  --red: #b80f1a;
  --stroke: rgba(22, 22, 22, 0.12);
  --panel: rgba(255, 255, 255, 0.82);
  color-scheme: light;
  color: var(--text);
  background: #fff !important;
}

.theme-light::before {
  display: none !important;
}

.theme-light section::after,
.theme-light .quick-facts::before,
.theme-light .process::before,
.theme-light .benefits::before,
.theme-light .site-builder::before,
.theme-light .packages::before,
.theme-light .compare::before,
.theme-light .guarantee::before,
.theme-light .reviews::before,
.theme-light .portfolio::before,
.theme-light .final-cta::before {
  background: none !important;
  mask-image: none !important;
}

.theme-light .quick-facts,
.theme-light .process,
.theme-light .benefits,
.theme-light .site-builder,
.theme-light .packages,
.theme-light .compare,
.theme-light .guarantee,
.theme-light .reviews,
.theme-light .portfolio,
.theme-light .final-cta {
  background: #fff !important;
  background-color: #fff !important;
}

.theme-light .quick-facts::after,
.theme-light .process::after,
.theme-light .benefits::after,
.theme-light .site-builder::after,
.theme-light .packages::after,
.theme-light .compare::after,
.theme-light .guarantee::after,
.theme-light .reviews::after,
.theme-light .portfolio::after,
.theme-light .final-cta::after {
  background: none !important;
  opacity: 0;
}

.theme-light .site-header,
.theme-light .booking-modal__dialog,
.theme-light .project-modal__dialog,
.theme-light .browser,
.theme-light .fact-card,
.theme-light .process-card,
.theme-light .benefit-card,
.theme-light .builder-panel,
.theme-light .builder-steps,
.theme-light .builder-progress,
.theme-light .builder-card,
.theme-light .builder-preview,
.theme-light .builder-summary-card,
.theme-light .builder-final-card,
.theme-light .package-card,
.theme-light .compare__table,
.theme-light .guarantee__box,
.theme-light .review-card,
.theme-light .portfolio-card,
.theme-light .footer,
.theme-light .stat-card,
.theme-light .cards article,
.theme-light .metric,
.theme-light .timeline-item,
.theme-light .booking-modal input,
.theme-light .booking-modal textarea,
.theme-light .builder-form input,
.theme-light .builder-form textarea,
.theme-light .builder-form select {
  border-color: rgba(20, 20, 20, 0.12) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(247, 243, 236, 0.78)) !important;
  color: var(--text) !important;
  box-shadow: 0 18px 52px rgba(42, 32, 22, 0.08);
}

.theme-light .fact-card,
.theme-light .process-card,
.theme-light .benefit-card,
.theme-light .builder-card,
.theme-light .package-card,
.theme-light .review-card,
.theme-light .portfolio-card,
.theme-light .stat-card,
.theme-light .cards article,
.theme-light .metric,
.theme-light .timeline-item,
.theme-light .stats li {
  border-color: rgba(184, 15, 26, 0.5) !important;
  background: #fff !important;
  box-shadow: 0 14px 34px rgba(28, 24, 20, 0.045);
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease !important;
}

.theme-light .fact-card:hover,
.theme-light .process-card:hover,
.theme-light .benefit-card:hover,
.theme-light .builder-card:hover,
.theme-light .package-card:hover,
.theme-light .review-card:hover,
.theme-light .portfolio-card:hover,
.theme-light .stat-card:hover,
.theme-light .cards article:hover,
.theme-light .metric:hover,
.theme-light .timeline-item:hover,
.theme-light .stats li:hover {
  border-color: rgba(184, 15, 26, 0.5) !important;
  background: #fff !important;
  box-shadow: 0 20px 46px rgba(28, 24, 20, 0.08);
  transform: scale(1.025) !important;
}

.theme-light .site-header {
  background: rgba(255, 255, 255, 0.82) !important;
  backdrop-filter: blur(22px);
  box-shadow: 0 18px 60px rgba(55, 44, 34, 0.12);
}

.theme-light .brand,
.theme-light .logo,
.theme-light .nav a,
.theme-light .site-nav a,
.theme-light h1,
.theme-light h2,
.theme-light h3,
.theme-light h4,
.theme-light strong,
.theme-light .builder-card strong,
.theme-light .footer a,
.theme-light .compare__table th,
.theme-light .compare__table td,
.theme-light .portfolio-card h3 {
  color: var(--text) !important;
}

.theme-light .lead,
.theme-light p,
.theme-light .kicker,
.theme-light .section-heading p,
.theme-light .builder-hero p,
.theme-light .builder-card em,
.theme-light .package-card li,
.theme-light .review-card p,
.theme-light .portfolio-card p,
.theme-light .footer p,
.theme-light .footer__bottom,
.theme-light .footer__legal a,
.theme-light .booking-modal__note,
.theme-light .builder-panel__head p,
.theme-light .builder-form label {
  color: var(--muted) !important;
}

.theme-light .stats li,
.theme-light .stats strong,
.theme-light .stats span,
.theme-light .stats small,
.theme-light .time strong,
.theme-light .time span {
  color: var(--text) !important;
  opacity: 1 !important;
}

.theme-light .stats small,
.theme-light .time span {
  color: var(--muted) !important;
}

.theme-light .logo::before {
  background: var(--red) !important;
}

.theme-light .hero {
  background: #fff !important;
}

.theme-light .hero::before {
  background: none !important;
}

.theme-light .hero::after {
  background: none !important;
}

.theme-light .kicker::before,
.theme-light .builder-group__title::before {
  background: var(--red) !important;
}

.theme-light .mini-hero {
  background:
    linear-gradient(135deg, rgba(184, 15, 26, 0.2), transparent 48%),
    #fff !important;
}

.theme-light .browser__top,
.theme-light .package-card__head,
.theme-light .builder-card__body {
  background: rgba(248, 244, 238, 0.74) !important;
  border-color: rgba(20, 20, 20, 0.08) !important;
}

.theme-light .line,
.theme-light .skeleton-line,
.theme-light .builder-card__preview,
.theme-light .builder-preview__screen,
.theme-light .builder-preview__bar,
.theme-light .builder-preview__line {
  background-color: rgba(25, 25, 25, 0.11) !important;
}

.theme-light .builder-card__preview,
.theme-light .builder-preview__screen {
  border-color: rgba(20, 20, 20, 0.14) !important;
}

.theme-light .builder-card__preview {
  border-bottom-color: rgba(184, 15, 26, 0.22) !important;
  background:
    linear-gradient(90deg, transparent 0 19%, rgba(17, 17, 17, 0.04) 19% 19.2%, transparent 19.2% 80.8%, rgba(17, 17, 17, 0.04) 80.8% 81%, transparent 81%),
    radial-gradient(circle at 50% 18%, rgba(184, 15, 26, 0.055), transparent 54%),
    #f6f4ef !important;
}

.theme-light .builder-card.is-selected .builder-card__preview {
  background:
    linear-gradient(90deg, transparent 0 19%, rgba(17, 17, 17, 0.04) 19% 19.2%, transparent 19.2% 80.8%, rgba(17, 17, 17, 0.04) 80.8% 81%, transparent 81%),
    linear-gradient(180deg, rgba(184, 15, 26, 0.055), transparent 70%),
    #f7f5f0 !important;
}

.theme-light .builder-card__preview::before {
  color: rgba(21, 21, 21, 0.5) !important;
}

.theme-light .builder-card__preview::after {
  border-color: rgba(21, 21, 21, 0.14) !important;
  background-color: #ffffff !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    inset 0 -24px 30px rgba(184, 15, 26, 0.025),
    0 14px 30px rgba(28, 24, 20, 0.1) !important;
}

.theme-light .builder-card.is-selected .builder-card__preview::after {
  border-color: rgba(184, 15, 26, 0.58) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.88),
    inset 0 -26px 30px rgba(184, 15, 26, 0.055),
    0 16px 34px rgba(184, 15, 26, 0.12) !important;
}

.theme-light .builder-card__preview {
  --mock:
    linear-gradient(var(--red), var(--red)),
    linear-gradient(#858585, #858585),
    linear-gradient(#d8d8d8, #d8d8d8);
}

.theme-light .builder-card__preview--hero,
.theme-light .builder-card__preview--about,
.theme-light .builder-card__preview--services,
.theme-light .builder-card__preview--features,
.theme-light .builder-card__preview--pricing,
.theme-light .builder-card__preview--cta,
.theme-light .builder-card__preview--form,
.theme-light .builder-card__preview--footer,
.theme-light .builder-card__preview--reviews,
.theme-light .builder-card__preview--faq,
.theme-light .builder-card__preview--portfolio,
.theme-light .builder-card__preview--gallery,
.theme-light .builder-card__preview--team,
.theme-light .builder-card__preview--stats,
.theme-light .builder-card__preview--process,
.theme-light .builder-card__preview--video,
.theme-light .builder-card__preview--logos,
.theme-light .builder-card__preview--blog,
.theme-light .builder-card__preview--timeline,
.theme-light .builder-card__preview--calculator,
.theme-light .builder-card__preview--compare,
.theme-light .builder-card__preview--map,
.theme-light .builder-card__preview--timer {
  --light-line: #8f8f8f;
  --light-soft: #d8d8d8;
  --light-panel: #f2f2f2;
  --light-panel-2: #ececec;
}

.theme-light .builder-card__preview--team {
  --mock:
    radial-gradient(circle, var(--red) 0 45%, transparent 47%),
    linear-gradient(var(--light-line), var(--light-line)),
    linear-gradient(var(--light-soft), var(--light-soft)),
    radial-gradient(circle, var(--red) 0 45%, transparent 47%),
    linear-gradient(var(--light-line), var(--light-line)),
    linear-gradient(var(--light-soft), var(--light-soft)),
    radial-gradient(circle, var(--red) 0 45%, transparent 47%),
    linear-gradient(var(--light-line), var(--light-line)),
    linear-gradient(var(--light-soft), var(--light-soft)),
    radial-gradient(circle, var(--red) 0 45%, transparent 47%),
    linear-gradient(var(--light-line), var(--light-line)),
    linear-gradient(var(--light-soft), var(--light-soft)) !important;
}

.theme-light .builder-card__preview--stats {
  --mock:
    linear-gradient(var(--red), var(--red)),
    linear-gradient(var(--light-soft), var(--light-soft)),
    linear-gradient(var(--light-line), var(--light-line)),
    linear-gradient(var(--red), var(--red)),
    linear-gradient(var(--light-soft), var(--light-soft)),
    linear-gradient(var(--light-line), var(--light-line)),
    linear-gradient(var(--red), var(--red)),
    linear-gradient(var(--light-soft), var(--light-soft)),
    linear-gradient(var(--light-line), var(--light-line)),
    linear-gradient(var(--red), var(--red)),
    linear-gradient(var(--light-soft), var(--light-soft)),
    linear-gradient(var(--light-line), var(--light-line)) !important;
}

.theme-light .builder-card__preview--process {
  --mock:
    radial-gradient(circle, var(--red) 0 42%, transparent 44%),
    radial-gradient(circle, var(--light-soft) 0 42%, transparent 44%),
    radial-gradient(circle, var(--light-soft) 0 42%, transparent 44%),
    radial-gradient(circle, var(--light-soft) 0 42%, transparent 44%),
    linear-gradient(var(--light-soft), var(--light-soft)),
    linear-gradient(var(--light-line), var(--light-line)),
    linear-gradient(var(--light-soft), var(--light-soft)),
    linear-gradient(var(--light-soft), var(--light-soft)),
    linear-gradient(var(--light-soft), var(--light-soft)) !important;
}

.theme-light .builder-card__preview--video {
  --mock:
    linear-gradient(rgba(184, 15, 26, 0.12), rgba(184, 15, 26, 0.12)),
    radial-gradient(circle, var(--red) 0 27%, transparent 29%),
    linear-gradient(90deg, transparent 0 42%, #fff 42% 62%, transparent 62%),
    linear-gradient(var(--red), var(--red)),
    linear-gradient(var(--light-soft), var(--light-soft)) !important;
}

.theme-light .builder-card__preview--logos {
  --mock:
    linear-gradient(var(--light-line), var(--light-line)),
    radial-gradient(circle, var(--light-line) 0 45%, transparent 47%),
    linear-gradient(var(--light-line), var(--light-line)),
    linear-gradient(var(--light-line), var(--light-line)),
    linear-gradient(45deg, var(--light-line) 0 48%, transparent 50%),
    linear-gradient(var(--light-line), var(--light-line)),
    linear-gradient(var(--red), var(--red)) !important;
}

.theme-light .builder-card__preview--blog {
  --mock:
    linear-gradient(rgba(184, 15, 26, 0.12), rgba(184, 15, 26, 0.12)),
    linear-gradient(var(--red), var(--red)),
    linear-gradient(var(--light-line), var(--light-line)),
    linear-gradient(var(--light-soft), var(--light-soft)),
    linear-gradient(rgba(184, 15, 26, 0.1), rgba(184, 15, 26, 0.1)),
    linear-gradient(var(--red), var(--red)),
    linear-gradient(var(--light-line), var(--light-line)),
    linear-gradient(var(--light-soft), var(--light-soft)),
    linear-gradient(rgba(184, 15, 26, 0.1), rgba(184, 15, 26, 0.1)),
    linear-gradient(var(--red), var(--red)),
    linear-gradient(var(--light-line), var(--light-line)),
    linear-gradient(var(--light-soft), var(--light-soft)) !important;
}

.theme-light .builder-card__preview--timeline {
  --mock:
    radial-gradient(circle, var(--red) 0 42%, transparent 44%),
    linear-gradient(var(--red), var(--red)),
    radial-gradient(circle, var(--red) 0 42%, transparent 44%),
    linear-gradient(var(--red), var(--red)),
    radial-gradient(circle, var(--red) 0 42%, transparent 44%),
    linear-gradient(var(--light-soft), var(--light-soft)),
    linear-gradient(var(--light-line), var(--light-line)),
    linear-gradient(var(--light-soft), var(--light-soft)),
    linear-gradient(var(--light-line), var(--light-line)),
    linear-gradient(var(--light-soft), var(--light-soft)) !important;
}

.theme-light .builder-card__preview--calculator {
  --mock:
    linear-gradient(var(--red), var(--red)),
    linear-gradient(var(--red), var(--red)),
    linear-gradient(var(--red), var(--red)),
    linear-gradient(var(--light-panel), var(--light-panel)),
    linear-gradient(var(--red), var(--red)),
    linear-gradient(#fff, #fff),
    linear-gradient(var(--red), var(--red)),
    linear-gradient(var(--red), var(--red)) !important;
}

.theme-light .builder-card__preview--compare {
  --mock:
    linear-gradient(rgba(184, 15, 26, 0.12), rgba(184, 15, 26, 0.12)),
    linear-gradient(var(--red), var(--red)),
    linear-gradient(var(--light-line), var(--light-line)),
    linear-gradient(var(--light-line), var(--light-line)),
    linear-gradient(var(--red), var(--red)),
    linear-gradient(var(--red), var(--red)),
    linear-gradient(var(--light-soft), var(--light-soft)),
    linear-gradient(var(--light-soft), var(--light-soft)),
    linear-gradient(var(--light-soft), var(--light-soft)) !important;
}

.theme-light .builder-card__preview--map {
  --mock:
    linear-gradient(rgba(17,17,17,.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17,17,17,.12) 1px, transparent 1px),
    linear-gradient(var(--red), var(--red)),
    linear-gradient(90deg, transparent 0 42%, #fff 42% 58%, transparent 58%),
    radial-gradient(circle, var(--red) 0 18%, transparent 20%) !important;
}

.theme-light .builder-card__preview--timer {
  --mock:
    linear-gradient(var(--light-panel), var(--light-panel)),
    linear-gradient(var(--light-panel), var(--light-panel)),
    linear-gradient(var(--light-panel), var(--light-panel)),
    linear-gradient(var(--light-panel), var(--light-panel)),
    linear-gradient(var(--red), var(--red)),
    linear-gradient(var(--red), var(--red)),
    linear-gradient(var(--red), var(--red)),
    linear-gradient(var(--light-line), var(--light-line)),
    linear-gradient(var(--light-line), var(--light-line)),
    linear-gradient(var(--light-line), var(--light-line)),
    linear-gradient(var(--light-line), var(--light-line)) !important;
}

.theme-light .builder-steps {
  background: transparent !important;
  box-shadow: none !important;
}

.theme-light .builder-step {
  color: rgba(21, 21, 21, 0.52) !important;
}

.theme-light .builder-step::before {
  background: rgba(184, 15, 26, 0.18) !important;
}

.theme-light .builder-step span {
  border-color: rgba(21, 21, 21, 0.16) !important;
  background: #fff !important;
  color: rgba(21, 21, 21, 0.5) !important;
  box-shadow:
    0 0 0 8px #fbfaf7,
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 10px 26px rgba(28, 24, 20, 0.1) !important;
}

.theme-light .builder-step.is-active {
  color: var(--red) !important;
}

.theme-light .builder-step.is-active span {
  border-color: var(--red) !important;
  background: #fff !important;
  color: var(--red) !important;
  box-shadow:
    0 0 0 8px #fbfaf7,
    0 0 0 10px rgba(184, 15, 26, 0.12),
    0 16px 34px rgba(184, 15, 26, 0.16) !important;
}

.theme-light .builder-step.is-complete {
  color: var(--red) !important;
}

.theme-light .builder-step.is-complete::before {
  background: var(--red) !important;
}

.theme-light .builder-step.is-complete span {
  border-color: var(--red) !important;
  background: var(--red) !important;
  color: #fff !important;
}

.theme-light .builder-step.is-complete span::after {
  color: #fff !important;
}

.theme-light .builder-progress {
  display: inline-flex !important;
  width: auto !important;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  position: relative;
  left: 50%;
  justify-self: start;
  margin: 18px auto 0 !important;
  border: 1px solid rgba(184, 15, 26, 0.22);
  border-radius: 999px;
  padding: 0 16px;
  background: rgba(255, 255, 255, 0.82) !important;
  color: var(--muted) !important;
  font-size: 13px;
  font-weight: 800;
  box-shadow: 0 10px 26px rgba(28, 24, 20, 0.06);
  transform: translateX(-50%);
}

.theme-light .builder-card.is-selected,
.theme-light .builder-step.is-active span,
.theme-light .package-card--featured,
.theme-light .fact-card--accent,
.theme-light .process-card--main {
  border-color: rgba(184, 15, 26, 0.58) !important;
  background: #fff !important;
  box-shadow: 0 24px 72px rgba(160, 128, 92, 0.12);
}

.theme-light .process-card:hover,
.theme-light .benefit-card:hover,
.theme-light .builder-card:hover,
.theme-light .portfolio-card:hover {
  border-color: rgba(184, 15, 26, 0.5) !important;
  background: #fff !important;
}

.theme-light .process-card:hover::before,
.theme-light .benefit-card:hover::before {
  opacity: 0 !important;
}

.theme-light .process-card:hover .process-card__icon,
.theme-light .benefit-card:hover .benefit-card__icon {
  background: rgba(184, 15, 26, 0.08) !important;
}

.theme-light .header-button,
.theme-light .button,
.theme-light .packages__button,
.theme-light .final-cta a,
.theme-light .booking-modal button[type="submit"],
.theme-light .builder-next,
.theme-light .builder-submit,
.theme-light .actions .primary {
  background: var(--red) !important;
  border-color: var(--red) !important;
  color: #fff !important;
  box-shadow: 0 18px 44px rgba(184, 15, 26, 0.24);
}

.theme-light .actions .secondary,
.theme-light .builder-back,
.theme-light .portfolio-more {
  background: #fff !important;
  color: var(--red) !important;
  border-color: rgba(184, 15, 26, 0.34) !important;
  box-shadow: 0 12px 34px rgba(42, 32, 22, 0.07);
}

.theme-light .portfolio-more {
  margin-left: auto;
  margin-right: auto;
}

.theme-light .compare__table tr,
.theme-light .compare__table th,
.theme-light .compare__table td {
  border-color: rgba(20, 20, 20, 0.09) !important;
}

.theme-light .compare__table tr:hover,
.theme-light .package-card li:hover {
  background: rgba(184, 15, 26, 0.055) !important;
}

.theme-light .compare-table {
  border: 1px solid rgba(184, 15, 26, 0.48) !important;
  background: #fff !important;
  box-shadow: 0 20px 54px rgba(28, 24, 20, 0.06);
  backdrop-filter: none;
}

.theme-light .compare-row {
  border-top-color: rgba(184, 15, 26, 0.16) !important;
}

.theme-light .compare-row > div {
  color: var(--muted) !important;
}

.theme-light .compare-row--head > div,
.theme-light .compare-row > div:first-child {
  color: var(--text) !important;
}

.theme-light .compare-row--head > div:nth-child(2),
.theme-light .compare-row .is-accent,
.theme-light .compare-row .is-check {
  color: var(--red) !important;
}

.theme-light .compare-row .is-muted {
  color: rgba(21, 21, 21, 0.36) !important;
}

.theme-light .compare-row:hover {
  background: rgba(184, 15, 26, 0.035) !important;
}

.theme-light .portfolio-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 244, 237, 0.92)) !important;
  overflow: hidden;
}

.theme-light .portfolio-card img {
  background: #ece8df !important;
}

.theme-light .portfolio-card__tags span,
.theme-light .builder-badge,
.theme-light .builder-counter,
.theme-light .process-card__time,
.theme-light .booking-modal__badge {
  background: rgba(184, 15, 26, 0.08) !important;
  border-color: rgba(184, 15, 26, 0.28) !important;
  color: var(--red) !important;
}

.theme-light .builder-counter strong {
  color: var(--text) !important;
}

.theme-light .builder-counter small {
  color: rgba(21, 21, 21, 0.46) !important;
}

.theme-light .builder-counter span:last-child {
  color: rgba(21, 21, 21, 0.62) !important;
}

.theme-light .booking-modal,
.theme-light .project-modal {
  background: rgba(20, 18, 16, 0.42) !important;
}

.theme-light .booking-modal__dialog {
  background:
    radial-gradient(circle at 20% 0%, rgba(184, 15, 26, 0.11), transparent 38%),
    #fff !important;
}

.theme-light .booking-modal input,
.theme-light .booking-modal textarea,
.theme-light .builder-form input,
.theme-light .builder-form textarea,
.theme-light .builder-form select {
  background: #fff !important;
  box-shadow: inset 0 0 0 1px rgba(20, 20, 20, 0.04);
}

.theme-light .booking-modal input::placeholder,
.theme-light .booking-modal textarea::placeholder,
.theme-light .builder-form input::placeholder,
.theme-light .builder-form textarea::placeholder {
  color: rgba(30, 30, 30, 0.44) !important;
}

.theme-light .footer {
  background:
    radial-gradient(circle at 50% 0%, rgba(184, 15, 26, 0.1), transparent 36%),
    #fff !important;
  border-top: 1px solid rgba(20, 20, 20, 0.1);
}

.theme-light .footer__bottom {
  border-color: rgba(20, 20, 20, 0.1) !important;
}

.theme-light .site-header.is-menu-open .site-nav,
.theme-light .site-header.is-menu-open .nav {
  background: rgba(255, 255, 255, 0.98) !important;
  border-color: rgba(20, 20, 20, 0.1) !important;
}

.theme-light .burger span {
  background: #fff !important;
}

@media (max-width: 980px) {
  .theme-light {
    overflow-x: hidden;
  }

  .theme-light .site-header {
    left: 10px;
    right: 10px;
    width: auto;
    transform: none;
    grid-template-columns: 1fr auto;
    gap: 10px;
    padding: 14px;
    min-height: 64px;
  }

  .theme-light .logo {
    position: relative;
    z-index: 3;
    display: inline-flex !important;
    align-items: center;
    justify-self: start;
    min-width: 0;
    color: var(--text) !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .theme-light .menu-toggle {
    justify-self: end;
  }

  .theme-light .hero {
    width: 100%;
    max-width: 100%;
    padding-left: 18px;
    padding-right: 18px;
    overflow: hidden;
  }

  .theme-light .hero__copy {
    width: 100%;
    max-width: 100%;
    text-align: center;
    align-items: center;
  }

  .theme-light .kicker {
    justify-content: center;
    width: 100%;
    font-size: 11px;
    white-space: normal;
    line-height: 1.25;
  }

  .theme-light h1 {
    max-width: 330px;
    margin-right: auto;
    margin-left: auto;
    font-size: clamp(34px, 9.5vw, 40px);
    line-height: 1;
    text-align: center;
    white-space: normal;
    overflow-wrap: normal;
  }

  .theme-light .lead {
    max-width: 100%;
    text-align: center;
  }

  .theme-light .actions {
    width: 100%;
    justify-content: center;
  }

  .theme-light .actions .button,
  .theme-light .time {
    width: min(100%, 340px);
  }

  .theme-light .stats {
    width: 100%;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .theme-light .stats li {
    min-width: 0;
    padding: 18px 14px;
    text-align: center;
  }

  .theme-light .burger {
    background: var(--red) !important;
    border-color: var(--red) !important;
  }

  .theme-light .site-nav a,
  .theme-light .nav a {
    background: rgba(248, 244, 238, 0.84) !important;
    border-color: rgba(20, 20, 20, 0.1) !important;
  }
}

.theme-light .reveal-block {
  opacity: 0;
  transform: translateY(46px) scale(0.975);
  transition:
    opacity 900ms ease,
    transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

.theme-light .reveal-block.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.theme-light .reveal-block.reveal-soft {
  transform: translateY(34px);
}

.theme-light .reveal-block.reveal-pop {
  transform: translateY(38px) scale(0.94);
}

.theme-light .reveal-block.reveal-pop.is-visible,
.theme-light .reveal-block.reveal-soft.is-visible {
  transform: translateY(0) scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .theme-light .reveal-block,
  .theme-light .reveal-block.is-visible,
  .theme-light .reveal-block.reveal-soft,
  .theme-light .reveal-block.reveal-pop {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

.theme-light,
.theme-light .hero,
.theme-light .quick-facts,
.theme-light .process,
.theme-light .benefits,
.theme-light .site-builder,
.theme-light .packages,
.theme-light .compare,
.theme-light .guarantee,
.theme-light .reviews,
.theme-light .portfolio,
.theme-light .final-cta,
.theme-light .footer {
  background: #fff !important;
  background-color: #fff !important;
  background-image: none !important;
}

.theme-light .hero::before,
.theme-light .hero::after,
.theme-light .quick-facts::before,
.theme-light .quick-facts::after,
.theme-light .process::before,
.theme-light .process::after,
.theme-light .benefits::before,
.theme-light .benefits::after,
.theme-light .site-builder::before,
.theme-light .site-builder::after,
.theme-light .packages::before,
.theme-light .packages::after,
.theme-light .compare::before,
.theme-light .compare::after,
.theme-light .guarantee::before,
.theme-light .guarantee::after,
.theme-light .reviews::before,
.theme-light .reviews::after,
.theme-light .portfolio::before,
.theme-light .portfolio::after,
.theme-light .final-cta::before,
.theme-light .final-cta::after,
.theme-light .footer::before {
  background: none !important;
  background-image: none !important;
  opacity: 0 !important;
}

.theme-light .site-header,
.theme-light .footer,
.theme-light .portfolio-card,
.theme-light .fact-card,
.theme-light .process-card,
.theme-light .benefit-card,
.theme-light .package-card,
.theme-light .review-card,
.theme-light .stat-card,
.theme-light .cards article,
.theme-light .metric,
.theme-light .timeline-item {
  background: #fff !important;
  background-color: #fff !important;
  background-image: none !important;
}

.theme-light .builder-card__preview.has-svg {
  background: #f8f7f3 !important;
  background-image:
    linear-gradient(90deg, transparent 0 19%, rgba(17, 17, 17, 0.035) 19% 19.2%, transparent 19.2% 80.8%, rgba(17, 17, 17, 0.035) 80.8% 81%, transparent 81%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 245, 240, 0.94)) !important;
}

.theme-light .builder-preview-svg {
  filter: drop-shadow(0 14px 22px rgba(28, 24, 20, 0.14));
}

.theme-light .builder-preview-svg .screen {
  fill: #ffffff !important;
  stroke: rgba(21, 21, 21, 0.16) !important;
}

.theme-light .builder-preview-svg .selected-screen {
  stroke: rgba(184, 15, 26, 0.5) !important;
}

.theme-light .builder-preview-svg .panel {
  fill: #f4f2ed !important;
  stroke: rgba(21, 21, 21, 0.13) !important;
}

.theme-light .builder-preview-svg .red-panel {
  fill: rgba(184, 15, 26, 0.08) !important;
  stroke: rgba(184, 15, 26, 0.44) !important;
}

.theme-light .builder-preview-svg .line {
  fill: #8b8f98 !important;
}

.theme-light .builder-preview-svg .line-strong {
  fill: #2b2b2b !important;
}

.theme-light .builder-preview-svg .muted {
  fill: #d9d6cf !important;
}

.theme-light .builder-preview-svg .label {
  fill: rgba(21, 21, 21, 0.48) !important;
}

.theme-light .builder-preview-svg [stroke="#777"],
.theme-light .builder-preview-svg [stroke="#888"] {
  stroke: #8b8f98 !important;
}

.theme-light .builder-preview-svg [fill="#777"],
.theme-light .builder-preview-svg [fill="#888"],
.theme-light .builder-preview-svg [fill="#7a0909"],
.theme-light .builder-preview-svg [fill="#830808"],
.theme-light .builder-preview-svg [fill="#5b0505"],
.theme-light .builder-preview-svg [fill="#4b0303"],
.theme-light .builder-preview-svg [fill="#360202"],
.theme-light .builder-preview-svg [fill="#2b0808"],
.theme-light .builder-preview-svg [fill="#4a0505"],
.theme-light .builder-preview-svg [fill="#111"] {
  fill: #e6e2db !important;
}

.theme-light .builder-preview-svg text[fill="#fff"] {
  fill: #ffffff !important;
}

.theme-light .builder-preview-svg text[fill="#888"],
.theme-light .builder-preview-svg text[fill="#777"] {
  fill: #8b8f98 !important;
}

.theme-light .builder-panel__actions {
  border-top-color: rgba(21, 21, 21, 0.1) !important;
}

.theme-light .builder-nav--ghost {
  border: 1px solid rgba(21, 21, 21, 0.12) !important;
  background: #fff !important;
  color: var(--text) !important;
  box-shadow: 0 10px 26px rgba(28, 24, 20, 0.08);
}

.theme-light .builder-nav--ghost svg {
  stroke: currentColor !important;
}

.theme-light .builder-nav--ghost:hover:not(:disabled) {
  border-color: rgba(184, 15, 26, 0.36) !important;
  color: var(--red) !important;
  filter: none !important;
  transform: translateY(-2px) scale(1.02);
}

.theme-light .builder-nav--ghost:disabled {
  border-color: rgba(21, 21, 21, 0.1) !important;
  background: rgba(255, 255, 255, 0.78) !important;
  color: rgba(21, 21, 21, 0.34) !important;
  box-shadow: none;
  opacity: 1;
}

.theme-light .style-preview,
.theme-light .style-preview[data-palette],
.theme-light .style-preview[data-style] {
  --preview-bg: #fff;
  --preview-text: #151515;
  --preview-muted: rgba(21, 21, 21, 0.64);
  border-color: color-mix(in srgb, var(--accent) 56%, transparent) !important;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 8%, transparent), transparent 48%),
    #fff !important;
  color: var(--preview-text) !important;
  box-shadow: 0 18px 44px rgba(28, 24, 20, 0.08);
}

.theme-light .style-preview h4 {
  color: #151515 !important;
}

.theme-light .style-preview p {
  color: rgba(21, 21, 21, 0.66) !important;
}

.theme-light .style-preview span {
  color: var(--accent) !important;
}

.theme-light .style-preview__actions span {
  border-color: var(--accent) !important;
  background: var(--accent) !important;
  color: #fff !important;
}

.theme-light .style-preview__actions span:last-child {
  background: #fff !important;
  color: var(--accent) !important;
}

/* ---------- Kicker line: softer glow ---------- */

.kicker span {
  box-shadow: 0 0 6px rgba(255, 21, 21, 0.35);
}

.theme-light .kicker span {
  box-shadow: none;
}

/* ---------- Portfolio previews: fill the frame, no side bars ---------- */

.portfolio-card--project img {
  object-fit: cover;
  object-position: top center;
}

/* ---------- Portfolio "view case" button ---------- */

.portfolio-card > div {
  text-align: center;
}

.portfolio-card__tags {
  justify-content: center;
}

.portfolio-card__bottom {
  justify-content: center;
  margin-top: 18px;
  background: none;
}

.portfolio-card__bottom a {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255, 21, 21, 0.4);
  border-radius: 10px;
  padding: 0 18px;
  color: var(--red);
  font-size: 14px;
  font-weight: 700;
  transition:
    background 180ms ease,
    border-color 180ms ease,
    color 180ms ease;
}

.theme-light .portfolio-card__bottom a {
  border-color: rgba(184, 15, 26, 0.3);
}

.portfolio-card__bottom a:hover,
.portfolio-card:hover .portfolio-card__bottom a,
.theme-light .portfolio-card:hover .portfolio-card__bottom a {
  border-color: var(--red);
  background: var(--red);
  color: #fff;
  transform: none;
}

/* ---------- Image logo ---------- */

.logo--image {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}

.logo--image::before {
  display: none !important;
}

.logo--image img {
  display: block;
  width: auto;
  height: 68px;
  /* logo.svg has wide transparent padding: pull it in so the header keeps its height */
  margin: -16px -10px;
  /* logo.svg is dark artwork: make it white on the dark theme */
  filter: invert(1);
}

.theme-light .logo--image img {
  filter: none;
}

@media (max-width: 820px) {
  .logo--image img {
    height: 58px;
    margin: -14px -8px;
  }
}

/* ---------- Theme toggle ---------- */

.site-header {
  grid-template-columns: auto minmax(0, 1fr) auto auto;
}

.theme-toggle {
  display: inline-grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  padding: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition:
    border-color 180ms ease,
    color 180ms ease;
}

.theme-light .theme-toggle {
  border-color: rgba(20, 20, 20, 0.12);
  background: #fff;
  color: #151515;
}

.theme-toggle:hover,
.theme-light .theme-toggle:hover {
  border-color: var(--red);
  color: var(--red);
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

.theme-toggle svg {
  width: 18px;
  height: 18px;
  stroke-width: 2;
}

.theme-toggle__moon,
.theme-light .theme-toggle__sun {
  display: none;
}

.theme-light .theme-toggle__moon {
  display: block;
}

@media (max-width: 1120px) {
  .theme-toggle {
    width: 40px;
    height: 40px;
  }
}

@media (max-width: 980px) {
  .theme-light .site-header {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    /* header-drop keeps translateX(-50%) via fill-mode and pushed the mobile header off-screen */
    animation: none;
  }

}

@media (min-width: 821px) and (max-width: 980px) {
  .site-header,
  .theme-light .site-header {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .site-header .header-button {
    display: none;
  }
}

@media (max-width: 820px) {
  .site-header,
  .theme-light .site-header {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }

  .theme-toggle {
    grid-row: 1;
    grid-column: 2;
  }

  .menu-toggle {
    grid-row: 1;
    grid-column: 3;
  }
}

/* ---------- Process cards: refined version ---------- */

.theme-light .process .process__grid {
  gap: 16px;
  text-align: left;
}

.theme-light .process .process-card {
  min-height: 0;
  padding: 28px 28px 30px;
  border: 1px solid #ebe7e2 !important;
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(20, 16, 12, 0.04) !important;
  text-align: left;
  transition:
    transform 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease !important;
}

.theme-light .process .process-card:hover {
  border-color: rgba(184, 15, 26, 0.28) !important;
  box-shadow: 0 18px 40px rgba(20, 16, 12, 0.07) !important;
  transform: translateY(-4px) !important;
}

.theme-light .process .process-card__top {
  margin-bottom: 36px;
  padding-bottom: 16px;
}

.theme-light .process .process-card__top::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--red) 0 var(--step, 25%), #efebe6 var(--step, 25%));
  content: "";
}

.theme-light .process .process-card:nth-child(2) { --step: 50%; }
.theme-light .process .process-card:nth-child(3) { --step: 75%; }
.theme-light .process .process-card:nth-child(4) { --step: 100%; }

.theme-light .process .process-card__number {
  color: var(--red);
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
}

.theme-light .process .process-card__time {
  padding: 0;
  border: 0;
  background: none !important;
  color: #8a8680 !important;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.theme-light .process .process-card__icon {
  width: 48px;
  height: 48px;
  margin: 0;
  border: 1px solid #ebe7e2;
  border-radius: 12px;
  background: #faf8f6 !important;
  transition:
    background 220ms ease,
    border-color 220ms ease;
}

.theme-light .process .process-card:hover .process-card__icon {
  border-color: var(--red);
  background: var(--red) !important;
  transform: none;
}

.theme-light .process .process-card__icon svg {
  width: 22px;
  height: 22px;
  color: #1c1a18;
  stroke-width: 1.75;
  transition: color 220ms ease;
}

.theme-light .process .process-card:hover .process-card__icon svg {
  color: #fff;
}

.theme-light .process .process-card h3 {
  margin: 22px 0 0;
  color: #151515;
  font-size: clamp(20px, 1.6vw, 23px);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-align: left;
}

.theme-light .process .process-card p {
  max-width: none;
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.55;
  text-align: left;
}