/* ==========================================================================
   AKA CONNECT — book a demo
   Figma node 134:4510 (1470x1585): one dark band holding the pitch on the
   left and the booking form card on the right, then a row of stat cards.
   Field primitives (.field / .field__input) come from base.css.
   ========================================================================== */

.demo {
  position: relative;
  overflow: hidden;
  width: calc(100% - var(--gutter) * 2);
  max-width: var(--content);
  margin: 0 auto;
  padding: 60px;
  background: var(--ink);
  border-radius: 40px;
  color: var(--white);
}
.demo__glow {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  opacity: .3;
  background: radial-gradient(closest-side,
              #66538C 0%, #D3BDFF 40.4%, #1E1E1E 93.3%, rgba(30, 30, 30, 0) 100%);
}
.demo__glow--1 { right: -560px; top: -79px;  width: 1040px; height: 596px; }
.demo__glow--2 { left: -773px;  top: -461px; width: 1289px; height: 765px; }

.demo__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 599px) 630px;
  gap: 60px;
  align-items: start;
}

/* ---------- left column ---------- */

.demo__pitch { display: flex; flex-direction: column; }
.demo__title {
  margin-top: 10px;
  font: var(--h1);
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--white);
}
.demo__title em { font-style: normal; color: var(--gray-purple); }
.demo__lead {
  max-width: 474px;
  margin-top: 20px;
  font: var(--t1);
  letter-spacing: 0;
  color: var(--gray-purple);
}

/* the oversized watermark line — Figma 134:5203 */
.demo__ghost {
  max-width: 665px;
  margin-top: 70px;
  font: var(--h-num);
  letter-spacing: var(--ls-num);
  color: rgba(255, 255, 255, .1);
}

.demo__see { margin-top: 60px; }
/* on the dark band these bullets are white, not purple */
.demo__see .arrows { gap: 10px; }
.demo__see .arrows li { color: var(--white); }

/* ---------- form card ---------- */

.demo__card {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 40px;
  background: var(--card);
  border-radius: var(--r-panel);
  box-shadow: var(--shd-panel);
  color: var(--ink-text);
}
.demo__card-title { font: var(--h3); letter-spacing: 0; color: var(--ink-text); }
.demo__card-sub { margin-top: 10px; font: var(--t-med); letter-spacing: 0; color: var(--gray-purple); }

/* Figma 134:5285 spaces the card's three blocks — heading, fields, submit —
   40px apart. The form wraps the last two, so it has to carry that gap itself
   or the button sits flush against the last field. */
.demo__form { display: flex; flex-direction: column; gap: 40px; }
.demo__fields { display: flex; flex-direction: column; gap: 16px; }
.demo__rows { display: flex; flex-direction: column; gap: 15px; }
.demo__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* select and date share the field pill, with the icon drawn as a background */
.field__select,
.field__date {
  appearance: none;
  padding-right: 44px;
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 14px 14px;
  color: var(--ink-text);
  font-size: 12px;
}
.field__select { background-image: url("../img/icon-chevron.svg"); }
.field__date   { background-image: url("../img/icon-calendar.svg"); }
.field__select:invalid { color: var(--gray-purple); }
.field__date::-webkit-calendar-picker-indicator { opacity: 0; width: 24px; cursor: pointer; }

/* the design draws this as a single pill; a one-line box is the wrong shape
   for "tell us about your requirements", so it is a real textarea */
.field__area {
  min-height: 92px;
  padding: 15px 30px 15px 15px;
  border-radius: 24px;
  resize: vertical;
  line-height: 1.5;
}

.demo__submit { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.demo__secure { font: var(--t-med); letter-spacing: 0; color: var(--gray-purple); text-align: center; }

/* ---------- stats ---------- */

.demo-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  max-width: var(--shell);
  margin: 20px auto 60px;
  padding: 0 var(--gutter);
}
.demo-stat {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  background: var(--light-gray);
  border-radius: var(--r-plan);
}
.demo-stat__value {
  font-family: var(--font);
  font-weight: 400;
  font-size: 45px;
  line-height: 1.3;
  color: var(--ink-text);
}
.demo-stat__label { font: var(--t-med); letter-spacing: 0; color: var(--gray-purple); }

/* ---------- responsive ---------- */

@media (max-width: 1240px) {
  .demo { padding: 40px; }
  .demo__grid { grid-template-columns: 1fr; gap: 40px; }
  .demo__card { max-width: 630px; }
  .demo__ghost { font-size: 44px; margin-top: 40px; }
  .demo-stats { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .demo { padding: 28px 20px; border-radius: 24px; }
  .demo__title { font-size: 34px; }
  .demo__ghost { font-size: 30px; }
  .demo__see { margin-top: 36px; }
  .demo__card { padding: 24px 20px; gap: 28px; }
  .demo__form { gap: 28px; }
  .demo__pair { grid-template-columns: 1fr; }
  .demo-stats { grid-template-columns: 1fr; }
  .demo-stat__value { font-size: 36px; }
}