/* Campaign layout using the existing GPTBot.uz palette and component geometry.
   Brand authority: tailwind.config.js and src/index.css. Shared site styles stay untouched. */

.vr-page {
  --vr-ink: #E6EEF7;
  --vr-muted: #B9C8D9;
  --vr-paper: #05070D;
  --vr-cyan: #2FE6D1;
  color: var(--vr-ink);
  color-scheme: dark
}

.vr-page * {
  box-sizing: border-box
}

.vr-page main {
  max-width: 1248px;
  padding: 28px 32px 0
}

.vr-page a:focus-visible,.vr-page button:focus-visible,.vr-page input:focus-visible,.vr-page textarea:focus-visible,.vr-page select:focus-visible {
  outline: 3px solid #2FE6D1;
  outline-offset: 4px
}

.vr-page header>div {
  max-width: 1248px
}

.vr-page [data-testid=article-breadcrumb] {
  font-size: 12px;
  color: var(--vr-muted);
  margin-bottom: 28px
}

.vr-page [data-testid=article-breadcrumb] span:last-child {
  color: var(--vr-ink)
}

.vr-page [data-testid=article-breadcrumb] a:hover {
  color: var(--vr-ink)
}

.vr-hero {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: center;
  gap: 16px;
  padding: 18px 0 52px
}

.vr-eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  text-transform: uppercase;
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: .12em;
  font-weight: 700;
  margin: 0 0 22px;
  color: var(--vr-muted)
}

.vr-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  background: #2FE6D1;
  border-radius: 50%
}

.vr-hero h1 {
  font-size: clamp(40px,4.6vw,65px);
  font-weight: 650;
  line-height: 1.04;
  letter-spacing: -.055em;
  margin: 0 0 24px
}

.vr-hero h1 span {
  background: linear-gradient(135deg,#FFFFFF 0%,#BFE4F2 40%,#2FE6D1 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent
}

.vr-intro {
  font-size: 18px;
  line-height: 1.65;
  max-width: 490px;
  margin: 0 0 25px;
  color: var(--vr-muted)
}

.vr-actions {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 17px
}

.vr-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  border-radius: 16px;
  padding: 16px 28px;
  font-size: 15px;
  line-height: 1.4;
  font-weight: 650;
  min-height: 52px;
  text-decoration: none;
  transition: background .15s,transform .15s
}

.vr-button:hover {
  filter: brightness(1.06);
  transform: translateY(-1px)
}

.vr-text-link {
  font-size: 14px;
  font-weight: 550;
  line-height: 1.6;
  padding: 5px 0;
  text-decoration: underline;
  text-underline-offset: 5px
}

.vr-caption {
  font-size: 11px;
  color: var(--vr-muted);
  line-height: 1.7;
  margin: 18px 0 0
}

.vr-hero-art {
  margin: 0;
  min-width: 0
}

.vr-hero-art img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 26px
}

.vr-hero-art figcaption {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 11px;
  color: var(--vr-muted);
  line-height: 1.5;
  text-align: center;
  padding: 15px 6px 0
}

.vr-strip {
  display: flex;
  gap: 24px;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  border-top: 1px solid rgba(255,255,255,.10);
  border-bottom: 1px solid rgba(255,255,255,.10);
  padding: 23px 10px;
  font-size: 13px;
  font-weight: 600
}

.vr-strip span[aria-hidden] {
  color: #2FE6D1
}

.vr-story,.vr-demo-section {
  padding: 86px 0 0
}

.vr-section-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  margin-bottom: 36px
}

.vr-section-heading h2,.vr-control h2,.vr-offer h2,.vr-form-intro h2 {
  font-size: clamp(29px,3.2vw,43px);
  line-height: 1.13;
  font-weight: 600;
  letter-spacing: -.04em;
  margin: 0
}

.vr-section-heading>p {
  max-width: 340px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--vr-muted);
  margin: 0
}

.vr-section-heading .vr-eyebrow,.vr-control .vr-eyebrow,.vr-offer .vr-eyebrow {
  margin-bottom: 13px
}

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

.vr-act-visual {
  position: relative
}

.vr-act-visual img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px
}

.vr-act-number {
  position: absolute;
  left: 14px;
  top: 14px;
  background: #0C1828;
  color: var(--vr-cyan);
  border: 1px solid rgba(47,230,209,.3);
  border-radius: 50%;
  font-size: 12px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  font-weight: 650
}

.vr-act-label {
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .01em;
  color: #2FE6D1;
  margin: 20px 0 9px
}

.vr-act h3 {
  font-size: 23px;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -.025em;
  margin: 0 0 16px
}

.vr-prose {
  font-size: 15px;
  line-height: 1.8;
  color: var(--vr-muted)
}

.vr-prose p {
  margin: 0 0 18px;
  color: inherit;
  font-size: inherit;
  line-height: inherit
}

.vr-prose ul {
  padding-left: 20px;
  margin: 0 0 20px
}

.vr-prose li {
  color: inherit;
  margin-bottom: 14px;
  line-height: inherit
}

.vr-prose a {
  color: #2FE6D1;
  text-decoration: underline;
  text-underline-offset: 3px
}

.vr-prose a:hover {
  color: #8AF0E4
}

.vr-prose div:has(>a[href="#lead-form"]) {
  display: none
}

.vr-page #lead-demo {
  margin: 0;
  border: 1px solid rgba(47,230,209,.25);
  border-radius: 24px;
  padding: 34px;
  background: #08111F;
  box-shadow: none;
  scroll-margin-top: 94px
}

.vr-page #lead-demo h2 {
  letter-spacing: -.025em
}

.vr-page #lead-demo .ld-eyebrow {
  color: #2FE6D1
}

.vr-page #lead-demo .ld-disclosure {
  color: #fff;
  border-color: rgba(47,230,209,.26);
  background: #0C1828
}

.vr-page #lead-demo .ld-options button {
  min-height: 46px
}

.vr-page #lead-demo .ld-build,.vr-page #lead-demo .ld-cta {
  background: linear-gradient(135deg,#229ED9 0%,#2FE6D1 100%);
  color: #04101A
}

.vr-control {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  padding: 86px 0
}

.vr-control img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 20px;
  margin-top: 30px
}

.vr-control .vr-prose li {
  padding: 0 0 16px;
  border-bottom: 1px solid rgba(255,255,255,.10)
}

.vr-control .vr-prose li:last-child {
  border: 0
}

.vr-offer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 24px;
  background: linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015));
  padding: 40px
}

.vr-price {
  font-size: 37px;
  letter-spacing: -.04em;
  line-height: 1.25;
  font-weight: 650;
  margin: 28px 0 20px
}

.vr-price small {
  display: block;
  font-size: 12px;
  letter-spacing: 0;
  font-weight: 500;
  color: var(--vr-muted);
  margin-bottom: 9px
}

.vr-price span {
  font-size: 23px
}

.vr-offer-points {
  list-style: none;
  padding: 0;
  margin: 0 0 25px;
  font-size: 14px;
  line-height: 1.7
}

.vr-offer-points li {
  margin: 7px 0
}

.vr-offer-points li:before {
  content: '✓';
  color: #2FE6D1;
  font-weight: 700;
  margin-right: 10px
}

.vr-offer>.vr-prose {
  padding-top: 30px
}

.vr-form-wrap {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 62px;
  background: #08111F;
  color: #E6EEF7;
  border: 1px solid rgba(47,230,209,.20);
  border-radius: 24px;
  padding: 44px;
  margin-top: 26px
}

.vr-form-intro {
  padding-top: 12px
}

.vr-form-intro .vr-eyebrow {
  color: #2FE6D1
}

.vr-form-intro>p:not(.vr-eyebrow) {
  font-size: 16px;
  line-height: 1.75;
  color: #ccd8da;
  margin: 25px 0
}

.vr-form-note {
  display: block;
  font-size: 12px;
  line-height: 1.75;
  color: #adbec3;
  max-width: 310px
}

.vr-page #lead-form {
  border: 0;
  background: none;
  padding: 0;
  margin: 0;
  scroll-margin-top: 94px
}

.vr-page #lead-form input:not([type=checkbox]),.vr-page #lead-form textarea,.vr-page #lead-form select {
  background: #0C1828;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 12px;
  color: #E6EEF7;
  max-width: 100%;
  min-width: 0
}

.vr-page #lead-form input::placeholder,.vr-page #lead-form textarea::placeholder {
  color: #bdc9ce
}

.vr-page #lead-form .btn-primary {
  background: linear-gradient(135deg,#229ED9 0%,#2FE6D1 100%);
  color: #04101A;
  border-radius: 16px;
  min-height: 52px
}

.vr-page #lead-form a {
  color: #2FE6D1
}

.vr-page #lead-form .eyebrow {
  color: #2FE6D1
}

.vr-page #lead-form label>span>span {
  color: #afc0c4
}

.vr-author {
  padding: 26px 0;
  border-bottom: 1px solid rgba(255,255,255,.10)
}

.vr-author [data-testid=article-meta] {
  border: 0;
  background: none;
  padding: 0;
  margin: 0;
  color: var(--vr-muted);
  font-size: 12px;
  line-height: 1.8
}

.vr-author [data-testid=article-meta] a {
  color: var(--vr-ink);
  text-decoration: underline
}

.vr-author>p {
  font-size: 11px;
  color: var(--vr-muted);
  margin: 8px 0 0
}

.vr-page main>div {
  color: var(--vr-muted)
}

.vr-page footer {
  margin-top: 64px
}

.vr-page footer>div {
  max-width: 1248px;
  color: #d3dedf
}

.vr-page footer a {
  color: #d3dedf
}

@media(max-width:999px) {

  .vr-page main {
    padding: 22px 24px 0
  }

  .vr-hero h1 {
    font-size: 47px
  }

  .vr-intro {
    font-size: 16px
  }

  .vr-hero {
    gap: 0
  }

  .vr-acts {
    gap: 18px
  }

  .vr-act h3 {
    font-size: 20px
  }

  .vr-control {
    gap: 32px
  }

  .vr-form-wrap {
    gap: 30px;
    padding: 32px
  }

  .vr-offer {
    padding: 32px;
    gap: 30px
  }

  .vr-strip {
    gap: 12px;
    font-size: 12px
  }
}

@media(max-width:719px) {

  .vr-page main {
    padding: 18px 18px 0
  }

  .vr-page [data-testid=article-breadcrumb] {
    margin-bottom: 25px;
    font-size: 10px
  }

  .vr-page [data-testid=article-breadcrumb] span:last-child {
    display: none
  }

  .vr-page [data-testid=article-breadcrumb] span:nth-last-child(2) {
    display: none
  }

  .vr-hero {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 4px 0 28px
  }

  .vr-hero h1 {
    font-size: clamp(35px,9.9vw,57px);
    margin-bottom: 20px
  }

  .vr-eyebrow {
    font-size: 10px;
    letter-spacing: .08em;
    margin-bottom: 18px
  }

  .vr-intro {
    font-size: 16px;
    line-height: 1.65;
    margin-bottom: 22px
  }

  .vr-actions {
    gap: 12px
  }

  .vr-button {
    padding: 16px 18px;
    font-size: 14px;
    gap: 14px;
    width: 100%
  }

  .vr-text-link {
    font-size: 13px
  }

  .vr-caption {
    font-size: 10px;
    margin-top: 13px
  }

  .vr-hero-art img {
    border-radius: 19px
  }

  .vr-hero-art figcaption {
    font-size: 10px
  }

  .vr-strip {
    gap: 9px;
    justify-content: flex-start;
    font-size: 11px;
    padding: 18px 0;
    line-height: 1.5
  }

  .vr-strip span:last-child {
    flex-basis: 100%
  }

  .vr-strip span:nth-last-child(2) {
    display: none
  }

  .vr-story,.vr-demo-section {
    padding-top: 54px
  }

  .vr-section-heading {
    display: block;
    margin-bottom: 26px
  }

  .vr-section-heading>p {
    margin-top: 18px;
    font-size: 14px
  }

  .vr-section-heading h2,.vr-control h2,.vr-offer h2,.vr-form-intro h2 {
    font-size: 32px
  }

  .vr-acts {
    grid-template-columns: 1fr;
    gap: 34px
  }

  .vr-act h3 {
    font-size: 25px;
    max-width: 340px
  }

  .vr-act-label {
    font-size: 11px;
    margin-top: 18px
  }

  .vr-prose {
    font-size: 15px;
    line-height: 1.8
  }

  .vr-page #lead-demo {
    padding: 23px 17px;
    border-radius: 18px
  }

  .vr-page #lead-demo h2 {
    font-size: 25px
  }

  .vr-page #lead-demo .ld-options button {
    max-width: 100%;
    white-space: normal;
    text-align: left
  }

  .vr-control {
    grid-template-columns: 1fr;
    gap: 26px;
    padding: 54px 0
  }

  .vr-control img {
    margin-top: 25px
  }

  .vr-offer {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 26px 20px;
    border-radius: 18px
  }

  .vr-offer>.vr-prose {
    padding: 0
  }

  .vr-price {
    font-size: 34px
  }

  .vr-form-wrap {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 27px 20px;
    border-radius: 18px;
    margin-top: 20px
  }

  .vr-form-intro {
    padding: 0
  }

  .vr-form-intro h2 br {
    display: none
  }

  .vr-form-intro>p:not(.vr-eyebrow) {
    font-size: 15px;
    margin: 18px 0
  }

  .vr-form-note {
    max-width: none
  }

  .vr-author {
    padding: 22px 0
  }

  .vr-page main>section {
    margin-top: 40px
  }

  .vr-page footer {
    margin-top: 40px
  }

  .vr-page footer>div {
    padding: 0 20px;
    font-size: 12px
  }

  .vr-page footer>div>div {
    flex-wrap: wrap
  }

  .vr-page [data-testid=header-cta] {
    font-size: 12px;
    max-width: 190px
  }

  .vr-page header>div {
    padding-left: 18px;
    padding-right: 18px
  }
}

@media(prefers-reduced-motion:reduce) {

  .vr-button {
    transition: none
  }

  .vr-button:hover {
    transform: none
  }
}

.vr-prose li>span {
  color: inherit
}

.vr-prose li>span:first-child {
  color: #2FE6D1
}

.vr-prose ul,.vr-prose li,.vr-prose li>span:last-child {
  color: var(--vr-muted)
}

.vr-form-wrap>* {
  min-width: 0
}

.vr-page #lead-form form,.vr-page #lead-form label,.vr-page #lead-form form>div {
  min-width: 0
}

.vr-page #lead-form input:not([type=checkbox]),.vr-page #lead-form textarea,.vr-page #lead-form select {
  width: 100%
}

@media(max-width:719px) {

  .vr-form-wrap {
    grid-template-columns: minmax(0,1fr)
  }
}

.vr-hero-art img,.vr-act-visual img,.vr-control img {
  border: 1px solid rgba(142,214,243,.16);
  background: #08111F;
  box-shadow: 0 24px 64px -40px rgba(34,158,217,.35)
}

.vr-act {
  min-width: 0;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px;
  padding: 18px;
  background: linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01))
}

.vr-page #lead-demo button,.vr-page #lead-demo .ld-cta {
  border-radius: 12px
}

.vr-page #lead-demo .ld-build,.vr-page #lead-demo .ld-cta {
  border-radius: 16px
}

.vr-page #lead-demo button:focus-visible,.vr-page #lead-demo .ld-cta:focus-visible {
  outline-color: #6FE7DA
}

.vr-page #lead-demo .ld-preview {
  background: #0C1828;
  border-color: rgba(255,255,255,.16)
}

.vr-page #lead-demo button:not(.ld-build) {
  background: #0C1828;
  border-color: rgba(255,255,255,.28)
}

.vr-page #lead-demo button[aria-pressed=true] {
  background: rgba(47,230,209,.12);
  border-color: #2FE6D1;
  color: #BFFAF2;
  box-shadow: inset 0 0 0 1px #2FE6D1
}

.vr-text-link {
  color: #6FE7DA
}

.vr-text-link:hover {
  color: #fff
}

.vr-eyebrow {
  color: #6FE7DA
}