/* ==========================================================================
   FIJLY — Marketing homepage sections
   Converted from the marketing design reference.
   ========================================================================== */

.page {
  max-width: var(--page-max-width);
  margin: 0 auto;
  overflow-x: clip;
}

/* Accessible secondary copy, using colors already in the design palette. */
.page :is(.work-card__metric-label, .testimonial__role,
  .price-card:not(.card-dark) .price-card__per, .price-card:not(.card-dark) .price-card__desc,
  .footer__about, .footer__bottom, .footer__bottom a) {
  color: var(--text-muted);
}
.page .work-card__metric-value { color: var(--success-dark); }

/* Supporting public pages share the established typography and spacing. */
.document-header { padding-block: 28px; }
.document-page { max-width: 820px; padding-block: 40px 64px; }
.document-page h1 { font-size: clamp(32px, 5vw, 48px); }
.document-page h2 { margin-top: 32px; margin-bottom: 12px; font-size: 22px; }
.document-page p { margin-top: 16px; line-height: 1.7; color: var(--text-muted); }
.document-page .document-lead { font-size: 20px; }
/* Links inside legal text are underlined, not told apart by colour alone. */
.document-page p a:not(.btn) { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.document-footer { padding-block: 24px; border-top: 1px solid var(--border-default); }
.document-footer nav { display: flex; flex-wrap: wrap; gap: 24px; }
.document-footer a { padding-block: 8px; }

section[id] {
  scroll-margin-top: var(--nav-height);
}

/* 1. Nav ================================================================= */
.nav__inner {
  display: flex;
  align-items: center;
  gap: 34px;
  height: var(--nav-height);
}

.nav__links {
  display: flex;
  gap: 26px;
}

.nav__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

.nav__signin {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.nav__signin:hover {
  color: var(--text-primary);
}

.nav__toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 40px;
  height: 40px;
  padding: 0;
  background: var(--surface-white);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
}

.nav__toggle-bar {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--text-primary);
  transition: transform .2s ease, opacity .2s ease;
}

.nav.is-open .nav__toggle-bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav.is-open .nav__toggle-bar:nth-child(2) { opacity: 0; }
.nav.is-open .nav__toggle-bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.mobile-menu {
  display: none;
}

@media (max-width: 767px) {
  .nav__links,
  .nav__signin {
    display: none;
  }

  .nav__toggle {
    display: flex;
  }

  .nav.is-open .mobile-menu {
    display: flex;
  }

  /* The header's backdrop-filter makes it the containing block,
     so the panel is positioned from the header's bottom edge. */
  .mobile-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: calc(100dvh - var(--nav-height));
    flex-direction: column;
    gap: 6px;
    padding: var(--space-lg) var(--gutter);
    background: var(--surface-white);
    border-top: 1px solid var(--border-light);
    overflow-y: auto;
  }

  .mobile-menu .nav-link,
  .mobile-menu .nav__signin {
    display: block;
    padding: 12px 0;
    font-size: 18px;
    font-weight: 700;
    border-bottom: 1px solid var(--border-light);
  }

  .mobile-menu .btn {
    margin-top: var(--space-lg);
  }

  body.nav-open {
    overflow: hidden;
  }
}

@media (max-width: 479px) {
  .nav__actions .btn {
    display: none;
  }
}

/* 2. Hero ================================================================ */
.hero {
  padding: 48px 0 24px;
  background: radial-gradient(ellipse at 78% 34%, #F0EDFF 0, #FAF9FF 26%, #FFFFFF 58%);
}
.hero__grid { display: grid; grid-template-columns: 1fr 1.06fr; column-gap: 32px; row-gap: 56px; align-items: center; }
.hero__copy { min-width: 0; align-self: start; padding-top: 8px; }
.hero .pill { margin-bottom: 24px; padding: 8px 12px; border: 1px solid #E6E1FC; background: #FAF9FF; font-size: 10px; box-shadow: none; }
.hero__title { margin: 0; max-width: 560px; font-size: clamp(46px, 4.5vw, 64px); line-height: 1.08; font-weight: 700; letter-spacing: -.055em; }
.hero__accent { display: inline-block; color: #5548E7; }
.hero__lead { max-width: 455px; margin-top: 24px; font-size: 18px; line-height: 1.75; color: #4E5365; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero__actions .btn { height: 54px; padding-inline: 22px; font-size: 14px; border-radius: 11px; }
.hero__actions .btn-primary { box-shadow: 0 6px 16px #5548E724, inset 0 1px 0 #FFFFFF26; }
.hero__actions .btn-outline { border-color: #E1DEEE; box-shadow: 0 2px 3px #17182B04; }
.hero__actions .btn-outline:hover { background: #FAF9FF; border-color: #B8AFED; }
.hero__proof { display: flex; align-items: center; gap: 18px; margin-top: 32px; padding: 0; list-style: none; color: #656078; font-size: 11px; line-height: 1.5; }
.hero__proof li { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.hero__proof svg { flex: none; color: #7768C9; }

.hero-showcase { min-width: 0; border: 1px solid #D8D1E9; border-radius: 20px; background: #FFFFFF; box-shadow: 0 28px 56px -22px #43378747, 0 6px 18px #4337870D; }
.hero-showcase__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; }
.hero-showcase__brand { display: flex; align-items: center; gap: 9px; color: #51495F; font-size: 9px; font-weight: 700; letter-spacing: .09em; }
.hero-showcase__brand svg { color: #5548E7; }
.hero-showcase__brand > span { color: #B6B0C9; font-weight: 400; }
.hero-showcase__format { color: #726B83; font: 10px var(--font-mono); }
.hero-showcase__stage { position: relative; margin: 0 10px; aspect-ratio: 1.5; overflow: hidden; border: 1px solid #DAD1ED; border-radius: 12px; background: radial-gradient(ellipse at 50% 50%, #F9F7FF 8%, #E8E1F7 80%); }
.hero-showcase__orbit { position: absolute; width: 90%; aspect-ratio: 1; top: -13%; left: 5%; border: 1px solid #DCD5F480; border-radius: 50%; }
.hero-showcase__orbit::before, .hero-showcase__orbit::after { content: ''; position: absolute; inset: 11%; border: 1px solid #DCD5F470; border-radius: 50%; }
.hero-showcase__orbit::after { inset: -11%; }
.motion-card { position: absolute; width: 64%; height: 70%; left: 15%; top: 11%; border: 1px solid #D4C9E8; border-radius: 13px; background: #FFFFFF; }
.motion-card--back { transform: translate(14px, -7px) rotate(7deg); background: #EDE7F8; box-shadow: 0 12px 32px #4A338724; }
.motion-card--main { padding: 16px; transform: rotate(-5deg); box-shadow: 0 20px 34px -8px #48387945, 0 2px 5px #4838790D; }
.motion-card__top { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: #272139; }
.motion-card__symbol { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; color: #5548E7; background: #EFEBFC; font-size: 16px; }
.motion-card__dots { margin-left: auto; color: #756B87; letter-spacing: 2px; }
.motion-card__art { position: relative; display: grid; place-items: center; height: 46%; margin-block: 12px; overflow: hidden; border-radius: 8px; background: #EEE8FA; }
.motion-card__tile { position: absolute; width: 52px; height: 52px; border: 1px solid #C6B8E9; border-radius: 12px; background: #EFEBFC; transform: translateX(-42px) rotate(-16deg); }
.motion-card__tile--two { background: #D5C9F4; transform: translateX(42px) rotate(16deg); }
.motion-card__tile--three { display: grid; place-items: center; width: 74px; height: 74px; color: #FFFFFF; border-color: #4C3AD5; background: #5548E7; transform: rotate(-3deg); box-shadow: 0 10px 22px #5548E74D, inset 0 1px 0 #FFFFFF40; }
.motion-card__tile--three svg { width: 38px; height: 38px; }
.motion-card__row { display: flex; align-items: center; gap: 8px; margin-top: 10px; color: #4C435D; font-size: 11px; white-space: nowrap; }
.motion-card__check, .motion-card__motion { display: grid; place-items: center; width: 16px; height: 16px; flex: none; border-radius: 50%; background: #F0EDF9; color: #5548E7; font-size: 10px; }
.motion-card__line { width: 32px; height: 4px; margin-left: auto; border-radius: 4px; background: #DCD5E9; }
.motion-card__loading { width: 32px; height: 4px; margin-left: auto; border-radius: 4px; background: linear-gradient(to right, #7561DC 65%, #DCD5E9 65%); }
.motion-scene { position: absolute; display: flex; align-items: center; gap: 10px; right: 4%; bottom: 8%; padding: 13px 16px; border: 1px solid #CFC3E7; border-radius: 11px; background: #FFFFFF; box-shadow: 0 14px 28px #49377A29; transform: rotate(4deg); }
.motion-scene__icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: #F1EEFE; color: #5548E7; font-size: 24px; }
.motion-scene__label { display: block; margin-bottom: 3px; color: #70677F; font-size: 8px; letter-spacing: .1em; }
.motion-scene strong { display: block; color: #30263E; font-size: 12px; font-weight: 600; }
.motion-scene__wave { margin-left: 8px; color: #705CCD; }
.motion-cursor { position: absolute; right: 13%; top: 42%; filter: drop-shadow(0 3px 3px #5548E726); }
.hero-showcase__stage-label { position: absolute; bottom: 12px; left: 14px; color: #73658B; font: 7px var(--font-mono); letter-spacing: .08em; }
.hero-showcase__controls { display: flex; align-items: center; gap: 12px; padding: 18px 16px; }
.hero-showcase__play { display: grid; place-items: center; flex: none; width: 40px; height: 40px; padding: 0; border: 1px solid #4C3AD5; border-radius: 50%; color: #FFFFFF; background: #5548E7; box-shadow: 0 4px 10px #5548E729; cursor: pointer; }
.hero-showcase__play:hover { background: #4536C9; }
.hero-showcase__pause-icon { display: none; }
.hero-showcase.is-playing .hero-showcase__pause-icon { display: block; }
.hero-showcase.is-playing .hero-showcase__play-icon { display: none; }
.hero-showcase__timeline { position: relative; flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; min-width: 0; }
.hero-showcase__timeline > span { padding: 10px 6px; border-radius: 4px; color: #62567E; background: #F0ECFA; font: 8px var(--font-mono); white-space: nowrap; }
.hero-showcase__timeline > span:nth-child(2) { background: #E8E2FA; }
.hero-showcase__timeline i { font-style: normal; }
.hero-showcase__playhead { position: absolute; top: -4px; bottom: -4px; left: 0; width: 2px; background: #6B59D9; }
.hero-showcase__playhead::before { content: ''; position: absolute; top: -1px; left: -3px; width: 8px; height: 6px; border-radius: 2px; background: #6B59D9; }
.hero-showcase__time { flex: none; font: 8px var(--font-mono); color: #756E84; }

@media (min-width: 768px) and (max-width: 1100px) {
  .hero { padding-top: 40px; }
  .hero__grid { column-gap: 24px; }
  .hero__title { font-size: clamp(40px, 4.7vw, 50px); }
  .hero__lead { font-size: 16px; }
  .hero__actions .btn { font-size: 12px; padding-inline: 15px; }
  .hero__proof { gap: 10px; font-size: 9px; }
  .hero__proof li { gap: 4px; }
  .hero-showcase__stage { aspect-ratio: 1.2; }
  .motion-card { width: 70%; left: 12%; height: 69%; }
  .motion-card--main { padding: 12px; }
  .hero-showcase__bar { padding: 16px 12px; }
  .hero-showcase__brand { font-size: 7px; gap: 6px; }
  .hero-showcase__controls { gap: 8px; padding: 16px 12px; }
  .hero-showcase__timeline i { display: none; }
  .motion-scene { right: 4%; padding: 10px; }
}
@media (max-width: 767px) {
  .hero { padding: 28px 0 20px; background: radial-gradient(ellipse at 50% 52%, #F2EEFF, #FFFFFF 64%); }
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .hero__copy { max-width: 540px; margin-inline: auto; padding-top: 0; text-align: center; }
  .hero .pill { margin-bottom: 20px; font-size: 9px; }
  .hero__title { font-size: clamp(39px, 8.5vw, 56px); }
  .hero__lead { max-width: 440px; margin: 20px auto 0; font-size: 16px; line-height: 1.7; }
  .hero__actions { justify-content: center; margin-top: 26px; gap: 10px; }
  .hero__actions .btn { height: 50px; font-size: 12px; padding-inline: 16px; }
  .hero__proof { justify-content: center; gap: 10px; font-size: 9px; }
  .hero__proof li { gap: 4px; }
  .hero-showcase { width: 100%; max-width: 520px; margin-inline: auto; transform: none; border-radius: 16px; }
  .hero-showcase__bar { padding: 15px 14px; }
  .hero-showcase__brand { font-size: 8px; gap: 6px; }
  .hero-showcase__stage { aspect-ratio: 1.3; }
  .motion-card--main { padding: 12px; }
  .motion-card { width: 67%; left: 13%; }
  .motion-card__top { font-size: 10px; }
  .motion-card__row { font-size: 9px; gap: 5px; margin-top: 8px; }
  .motion-card__art { margin-block: 9px; }
  .motion-card__tile--three { width: 60px; height: 60px; }
  .motion-card__tile--three svg { width: 34px; height: 34px; }
  .motion-scene { padding: 10px 12px; gap: 8px; }
  .motion-scene__wave { width: 25px; margin-left: 3px; }
  .hero-showcase__controls { padding: 16px 12px; gap: 10px; }
  .hero-showcase__time { font-size: 7px; }
  .hero-showcase__timeline > span { font-size: 7px; padding-inline: 4px; }
}
@media (max-width: 359px) {
  .hero__title { font-size: 36px; }
  .hero__actions .btn { padding-inline: 12px; font-size: 11px; }
  .hero__proof { gap: 7px; font-size: 8px; }
  .hero__proof li { gap: 3px; }
  .hero__proof svg { width: 10px; height: 10px; }
  .hero-showcase__stage { aspect-ratio: 1.1; }
  .hero-showcase__timeline i { display: none; }
}

/* 3. Product-world showcase ============================================== */
.trust {
  min-width: 0;
  margin-top: 0;
  padding: 17px 24px;
  grid-column: 1 / -1;
  background: #F5F4FF;
  border: 1px solid #E7E4F5;
  border-radius: 12px;
  text-align: center;
}
.trust__head { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 10px; margin-bottom: 15px; }
.trust__label { font-size: 9px; font-weight: 700; line-height: 1.5; letter-spacing: .12em; color: #5B566D; }
.trust__note { padding-left: 10px; border-left: 1px solid #DFDDE8; font-size: 8px; line-height: 1.5; color: #666D7C; }
.trust__brands { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: center; gap: 20px; padding: 0; list-style: none; }
.trust__brand { display: flex; align-items: center; justify-content: center; gap: 8px; color: #555362; font-size: 17px; font-weight: 700; line-height: 1.3; letter-spacing: -.045em; white-space: nowrap; }
.trust__brand svg { width: 19px; height: 19px; flex: none; color: #898493; }
.trust__brand--aiflow { font-weight: 800; letter-spacing: -.055em; }
.trust__brand--layerbase { font-weight: 600; letter-spacing: -.04em; }
.trust__brand--northbeam { font-weight: 800; letter-spacing: -.06em; }
.trust__brand--clouddesk { font-weight: 600; letter-spacing: -.05em; }
.trust__brand--taskpilot { font-weight: 700; letter-spacing: -.035em; }
.trust__brand--finly { font-size: 19px; font-weight: 800; letter-spacing: -.055em; }
@media (max-width: 1023px) {
  .trust__brands { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 24px; }
}
@media (max-width: 767px) {
  .trust { padding: 16px 16px; }
  .trust__head { margin-bottom: 13px; }
  .trust__label { font-size: 8px; letter-spacing: .09em; }
  .trust__note { font-size: 7.5px; }
  .trust__brands { gap: 12px 12px; }
  .trust__brand { gap: 5px; font-size: 11.5px; }
  .trust__brand svg { width: 15px; height: 15px; }
  .trust__brand--finly { font-size: 14px; }
}
@media (max-width: 359px) {
  .trust__brands { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px 12px; }
}

/* 4. Services ============================================================ */
.services {
  padding-block: 56px;
  background: #FCFCFE;
}

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

.services__grid { gap: 24px; }

.service-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid #E8E5EF;
  border-radius: 22px;
  background: #FFFFFF;
  box-shadow: 0 2px 6px #25203C04;
}

.service-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px -8px #25203C14;
}

/* The frame preserves its ratio when a real video or iframe is added. */
.service-card__media {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  aspect-ratio: 16 / 9;
  margin: 12px 12px 0;
  overflow: hidden;
  border: 1px solid #28203C06;
  border-radius: 14px;
  background: #F2EFFA;
}
.service-card__media--promo { background: #F7F1EE; }
.service-card__media--demo { background: #EEF4F3; }
.service-card__media--explainer { background: #EEF2F8; }
.service-card__media--tutorial { background: #F7F0F3; }
.service-card__media--homepage { background: #F0EEF7; }
.service-card__media > :is(video, iframe) { display: block; width: 100%; height: 100%; border: 0; object-fit: cover; }
.service-card__play {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid #FFFFFF;
  border-radius: 50%;
  background: #FFFFFFD9;
  color: #7568B5;
  box-shadow: 0 2px 8px #342B5608;
}

.service-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 22px 24px 24px;
  background: #FFFFFF;
}
.service-card__title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -.025em;
  color: #17182B;
}
.service-card__desc {
  flex: 1;
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.65;
  color: #65677A;
}
@media (prefers-reduced-motion: reduce) {
  .service-card:hover { transform: none; }
}

/* 5. Process ============================================================= */
.process {
  background: #FCFBFF;
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
}

.process .section-head { margin-bottom: 44px; }

/* The dotted connector lives on the track and sits behind the cards, so it
   reads as a continuous progress line that is only visible in the gaps. */
.process__track { position: relative; }

.process__track::before {
  content: '';
  position: absolute;
  top: 50px;                 /* vertical centre of the 48px icon tile */
  left: 12.5%;               /* centre of the first of four columns */
  right: 12.5%;              /* centre of the last */
  border-top: 2px dotted #D9D2F2;
  z-index: 0;
}

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

.step {
  position: relative;
  z-index: 1;                /* keeps the card over the connector */
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 26px 22px 24px;
  border: 1px solid #E9E5F5;
  border-radius: 18px;
  background: var(--surface-white);
  box-shadow: 0 1px 2px #2B245608;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.step:hover {
  border-color: #D3C9F3;
  box-shadow: 0 8px 22px -10px #4A3B9E2E;
  transform: translateY(-2px);
}

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

.step__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(150deg, #F0ECFE, #E7EEFC);
  border: 1px solid #E2DCF8;
  color: #5548E7;
}

.step__no {
  font-family: var(--font-body);
  font-size: 34px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.04em;
  /* Full-strength brand purple at 5.06:1 on the card. Semibold and no opacity
     so it stays crisp, while the near-black title keeps the stronger weight
     and contrast and remains the primary read. */
  color: #6554F6;
}

.step__title {
  margin-top: 0;
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -.02em;
  color: var(--text-primary);
}

.step__desc {
  margin-top: 8px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-muted);
}

.process__cta {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

.process__cta .btn svg { transition: transform .18s ease; }
.process__cta .btn:hover svg { transform: translateX(3px); }

/* 6. Selected work ======================================================= */
.work__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: 18px;
}

.work__head h2 {
  font-size: 42px;
}

.work-card {
  overflow: hidden;
}

.work-card__media {
  position: relative;
  display: block;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 10;
  width: 100%;
  padding: 0;
  border: 0;
  overflow: hidden;
  text-align: left;
}

.work-card__media--aiflow    { background: linear-gradient(135deg, var(--primary), var(--secondary)); }
.work-card__media--clouddesk { background: linear-gradient(135deg, var(--info), var(--sky)); }
.work-card__media--finly     { background: linear-gradient(135deg, var(--warning), var(--amber-light)); }

.work-card__body {
  padding: 20px;
}

.work-card__title {
  font-size: 16px;
  letter-spacing: normal;
}

.work-card__line {
  margin-top: 6px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-muted);
}

.work-card__metric {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: 14px;
}

.work-card__metric-value {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 800;
  color: var(--success);
}

.work-card__metric-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-light);
}

/* 7. Impact card ========================================================= */
.results {
  --results-accent: var(--primary);
  --results-text: #17182B;
  --results-muted: var(--text-muted);
  --results-border: #ebe8f7a6;
  padding-top: 18px;
  color: var(--results-text);
}

.results > .container { max-width: calc(1120px + var(--gutter) * 2); }
.results__head { max-width: 900px; margin: 0 auto 18px; text-align: center; }

.results__panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 20px 28px;
  border: 1px solid #e8e5f3;
  border-radius: 28px;
  background: linear-gradient(135deg, #faf9ff, #f6f4ff 60%, #fcfbff);
  box-shadow: 0 16px 40px -24px #25204b26, 0 3px 10px #25204b04;
  text-align: center;
}

.results__panel::before,
.results__panel::after {
  content: '';
  position: absolute;
  z-index: -1;
  width: 360px;
  height: 360px;
  border: 1px solid #5b4bf50a;
  border-radius: 50%;
  pointer-events: none;
}
.results__panel::before { top: -255px; right: -100px; box-shadow: 0 0 0 38px #5b4bf503, 0 0 0 76px #5b4bf503; }
.results__panel::after { bottom: -300px; left: -140px; box-shadow: 0 0 0 46px #5b4bf503; }

.results__eyebrow {
  margin-bottom: 14px;
  color: var(--results-accent);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  line-height: 1.6;
}

.results__head h2 {
  font-size: 44px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.results__head h2 span { color: var(--results-accent); }

.results__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 0;
}

.result {
  min-width: 0;
  padding: 4px 16px;
}

.result + .result {
  border-left: 1px solid var(--results-border);
}

.result__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin: 0 auto 6px;
  border: 1px solid #e5dffa;
  border-radius: 13px;
  background: #eeeaff;
  color: var(--results-accent);
  box-shadow: inset 0 1px 0 #ffffffb3;
}

.result__value {
  color: var(--results-accent);
  font-size: clamp(44px, 3.4vw, 48px);
  font-weight: 700;
  font-variant-numeric: lining-nums tabular-nums;
  line-height: 1.15;
  letter-spacing: -.055em;
  white-space: nowrap;
}

.result__unit {
  margin-left: 2px;
  font-size: .6em;
  font-weight: 600;
  letter-spacing: -.025em;
}

.result__label {
  margin-top: 10px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -.015em;
}

.result__detail {
  max-width: 220px;
  margin: 6px auto 0;
  color: var(--results-muted);
  font-size: 14px;
  line-height: 1.6;
  text-wrap: balance;
}

.results__note {
  margin-top: 12px;
  color: var(--results-muted);
  font-size: 15px;
  line-height: 1.6;
}

/* 8. Testimonial ========================================================= */
.testimonial {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  max-width: 1320px;
  margin: 0 auto;
  padding: 16px var(--gutter) 64px;
  text-align: center;
}

.testimonial > figure { max-width: 900px; margin-inline: auto; }
.testimonial__quote { max-width: 900px; margin-inline: auto; }
.testimonial::before,
.testimonial::after {
  content: '';
  position: absolute;
  z-index: -1;
  width: 180px;
  height: 180px;
  border: 1px solid #5b4bf50a;
  border-radius: 50%;
  background: #f9f8ff;
  opacity: .65;
  pointer-events: none;
}
.testimonial::before { left: -145px; top: 44px; box-shadow: 0 0 0 24px #5b4bf503; }
.testimonial::after { right: -155px; bottom: 40px; box-shadow: 0 0 0 30px #5b4bf503; }
.testimonial .sample-label { margin-bottom: 10px; color: var(--primary); font-size: 12px; font-weight: 600; letter-spacing: .14em; line-height: 1.6; }

.testimonial__mark {
  width: 34px;
  height: 34px;
  margin: 0 auto;
  padding: 5px;
  border-radius: 10px;
  background: #f2efff;
}

.testimonial__quote p {
  margin-top: 14px;
  color: var(--text-primary);
  font-size: 27px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -.03em;
  text-wrap: balance;
}

.testimonial__quote p span { color: var(--primary); }

.testimonial__author {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 20px;
}

.testimonial__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid #dfd8fc;
  background: linear-gradient(135deg, #f2efff, #e8e1ff);
  color: var(--primary);
  font-size: 16px;
  font-weight: 700;
}

.testimonial__meta {
  text-align: left;
}

.testimonial__name {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
}

.testimonial__role {
  margin-top: 2px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-light);
}

@media (min-width: 768px) and (max-width: 1023px) {
  .results__head h2 { font-size: 36px; }
  .results__panel { padding: 12px 24px; }
  .results__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .result { padding: 18px 16px; }
  .result:nth-child(3) { border-left: 0; }
  .result:nth-child(n + 3) { border-top: 1px solid var(--results-border); }
  .testimonial { padding-block: 14px 52px; }
  .testimonial__quote p { font-size: 25px; }
}

/* 9. Pricing ============================================================= */
/* One card per video length; every format costs the same. */
.pricing.section { padding-bottom: 32px; }
.pricing > .container { max-width: calc(1200px + var(--gutter) * 2); }
.pricing .section-head { margin-bottom: 34px; }
.pricing .section-head .eyebrow { margin-bottom: 14px; font-size: 12px; font-weight: 600; letter-spacing: .14em; }
.pricing .section-head h2 { max-width: 950px; margin-inline: auto; font-size: 46px; font-weight: 700; line-height: 1.2; text-wrap: balance; }
.pricing .section-head p { max-width: 650px; margin-top: 14px; font-size: 17px; line-height: 1.65; }
.pricing__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 18px;
  align-items: stretch;
}

.price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 28px 24px 24px;
  border: 1px solid #e5e6ef;
  border-radius: 22px;
  background: var(--surface-white);
  box-shadow: 0 10px 26px -18px #25204b26, 0 2px 5px #25204b04;
}

.price-card .btn { margin-top: auto; min-height: 50px; height: auto; padding: 13px 16px; border-radius: 10px; font-size: 14px; font-weight: 700; line-height: 1.5; }
.pricing .price-card .btn-outline { border-color: #dcdfea; background: #fff; color: var(--text-primary); box-shadow: 0 1px 2px #10182804; }
.pricing .price-card .btn-outline:hover { border-color: var(--primary); background: #f4f2ff; color: var(--primary); box-shadow: 0 3px 8px #5b4bf50d; }
.pricing .price-card .btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; }
.pricing .price-card--featured .btn:focus-visible { outline-color: #d8d1ff; }

.price-card .badge-solid {
  position: absolute;
  top: -12px;
  right: 18px;
  padding: 5px 11px;
  border: 1px solid #d8d0ff;
  border-radius: 999px;
  background: #eee9ff;
  color: #4938c6;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  box-shadow: 0 2px 4px #17132f0a;
}

.price-card__name {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -.02em;
  color: var(--primary);
}

.price-card__price {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin-top: 16px;
}

.price-card__amount {
  font-family: var(--font-body);
  font-size: 52px;
  font-weight: 700;
  line-height: 1.15;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: -.05em;
  color: var(--text-primary);
}

.price-card__per {
  white-space: nowrap;
  font-size: 14px;
  color: var(--text-light);
}

.price-card__desc {
  margin: 14px 0 24px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-light);
}

/* Featured (dark) length */
.pricing .price-card.card-dark { background: linear-gradient(145deg, #242039, #14131f); border-color: #39314f; box-shadow: 0 12px 28px -18px #30216b55, inset 0 1px 0 #ffffff0a; }
.price-card.card-dark .price-card__name { color: #c9beff; }
.price-card.card-dark .price-card__amount { color: var(--surface-white); }
.price-card.card-dark .price-card__per,
.price-card.card-dark .price-card__desc { color: #c4bfd3; }
.pricing .price-card--featured .btn-primary { border: 1px solid #7868fc; background: linear-gradient(180deg, #6858f8, #5745e5); box-shadow: 0 3px 8px #0a072b26, inset 0 1px 0 #ffffff1a; }
.pricing .price-card--featured .btn-primary:hover { background: linear-gradient(180deg, #7464ff, #6250ef); box-shadow: 0 4px 12px #0a072b33; }

@media (min-width: 1024px) and (max-width: 1199px) {
  .pricing__grid { gap: 16px; }
  .price-card { padding-inline: 20px; }
  .price-card__amount { font-size: 48px; }
}

/* 10. FAQ ================================================================ */
.faq {
  max-width: 760px;
  margin: 0 auto;
  padding: 56px var(--gutter);
}

.faq__title {
  margin-bottom: 34px;
  font-size: 36px;
  text-align: center;
}

.faq__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-item {
  overflow: hidden;
  padding: 20px 22px;
  background: var(--surface-white);
  border: 1px solid var(--border-default);
  border-radius: 14px;
  box-shadow: var(--shadow-xs);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  font-size: 15.5px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item__icon {
  flex: none;
  transition: transform .2s ease;
}

.faq-item[open] .faq-item__icon {
  transform: rotate(45deg);
}

.faq-item__answer {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
}

/* 12. Footer ============================================================= */
/* Three parts: the .footer-cta conversion banner, the four-column
   .footer__grid, and the .footer__bottom copyright bar. Colours come from the
   shared tokens; the two lavender stops below are the only footer-local ones. */
.footer {
  --footer-cta-from: #F4F2FF;
  --footer-cta-to: #EAE9FF;
  /* The banner is a padded card, so its text sits further in than the columns
     below it. --footer-inset matches that padding and is applied to the grid
     and the copyright bar, so all three sections' content shares one left
     edge. It tracks the banner's padding at every breakpoint; 0 on mobile,
     where the columns should use the full gutter. */
  --footer-inset: 48px;
  background: var(--surface-white);
  border-top: 1px solid var(--border-light);
}

/* Section A: CTA banner -------------------------------------------------- */
.footer-cta {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg) 36px;
  margin-top: var(--space-2xl);
  padding: 48px;
  overflow: hidden;
  border-radius: var(--radius-panel);
  background: linear-gradient(120deg, var(--footer-cta-from), var(--footer-cta-to));
}

/* Grows into whatever the button and the decoration leave, so the heading has
   the most room possible before it has to wrap. */
.footer-cta__text {
  flex: 1 1 420px;
  min-width: 0;
}

.footer-cta__title {
  max-width: 26ch;
  font-size: 30px;
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -.02em;
  color: var(--text-primary);
  text-wrap: balance;
}

.footer-cta__sub {
  margin-top: 10px;
  max-width: 44ch;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-muted);
}

.footer-cta__action {
  flex: none;
}

/* Slightly taller than .btn--md, with a lighter shadow than the hero CTA so it
   reads as a footer action rather than the page's primary call. */
.footer-cta__btn {
  height: 48px;
  padding-inline: 24px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-primary-sm);
}

.footer-cta__btn:hover {
  box-shadow: var(--shadow-primary-md);
}

/* Decorative only, and only where there is room for it beside the button.
   Vertically centred and fully inside the banner's padding, so the rounded
   corner never clips it. */
.footer-cta__decor {
  display: none;
  position: absolute;
  top: 50%;
  right: 28px;
  width: 92px;
  height: 92px;
  transform: translateY(-50%);
  color: var(--primary);
  pointer-events: none;
}

/* Section B: navigation -------------------------------------------------- */
.footer__grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1.2fr;
  gap: var(--space-xl);
  padding-inline: calc(var(--gutter) + var(--footer-inset));
  padding-top: 52px;
  padding-bottom: 36px;
}

.footer__col {
  min-width: 0;
}

.footer .logo {
  gap: 9px;
  margin-bottom: 14px;
}

.footer .logo__mark {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  box-shadow: none;
}

.footer .logo__word {
  font-size: 17px;
  letter-spacing: .12em;
}

.footer__about {
  max-width: 34ch;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--text-muted);
}

.footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-full);
  background: var(--primary-tint);
  color: var(--text-muted);
  transition: background-color .15s ease, color .15s ease;
}

.footer__social-link:hover {
  background: var(--primary);
  color: var(--surface-white);
}

.footer__social-link:focus-visible {
  outline-offset: 3px;
}

.footer__heading {
  margin-bottom: 14px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--text-primary);
}

.footer__links {
  display: flex;
  flex-direction: column;
  gap: 0;
  font-size: 13.5px;
}

.footer__links a {
  display: inline-block;
  padding-block: 8px;
  color: var(--text-muted);
  transition: color .15s ease;
}

.footer__links a:hover {
  color: var(--primary);
}

/* A hairline rule separates the contact column from the link columns. */
.footer__connect {
  padding-left: var(--space-xl);
  border-left: 1px solid var(--border-light);
}

.footer__connect-text {
  max-width: 26ch;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-muted);
}

.footer__connect-btn {
  margin-top: 16px;
  padding-inline: 18px;
  background: var(--primary-tint-hover);
  border: 1px solid var(--primary-border);
  color: var(--primary);
}

.footer__connect-btn:hover {
  background: var(--primary-tint);
  border-color: var(--primary-soft-line);
  color: var(--primary-hover);
}

/* Section C: copyright --------------------------------------------------- */
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px var(--space-lg);
  padding-inline: calc(var(--gutter) + var(--footer-inset));
  padding-block: 20px;
  border-top: 1px solid var(--border-light);
  font-size: 12.5px;
  color: var(--text-muted);
}

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.footer__legal-sep {
  color: var(--border-default);
}

.footer__bottom a {
  color: var(--text-muted);
  transition: color .15s ease;
}

.footer__bottom a:hover {
  color: var(--primary);
}

/* Footer responsive ------------------------------------------------------ */
/* The decoration only appears where there is room for it beside the button,
   and the content reserves that space so the two never overlap. */
@media (min-width: 1200px) {
  .footer {
    --footer-inset: 52px;
  }

  .footer-cta {
    padding: 52px;
    column-gap: 32px;
  }

  /* No cap here: the heading takes one line when the width allows it. */
  .footer-cta__title {
    max-width: none;
  }

  .footer-cta__decor {
    display: block;
    right: 20px;
  }

  /* 92px of artwork + its 20px inset + 12px of clearance from the button. */
  .footer-cta__action {
    margin-right: 124px;
  }
}

/* Laptop and tablet: two columns, brand across the top. */
@media (max-width: 1023px) {
  .footer {
    --footer-inset: 36px;
  }

  .footer-cta {
    padding: 36px;
  }

  .footer-cta__title {
    font-size: 26px;
  }

  .footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-lg) var(--space-xl);
    padding-top: 44px;
    padding-bottom: 32px;
  }

  .footer__brand {
    grid-column: 1 / -1;
  }

  /* With two columns the vertical rule no longer lines up with a boundary. */
  .footer__connect {
    padding-left: 0;
    border-left: 0;
  }
}

/* Mobile: one stacked column, everything left-aligned. */
@media (max-width: 767px) {
  .footer {
    --footer-inset: 0px;
  }

  .footer-cta {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-lg);
    margin-top: var(--space-xl);
    padding: 28px 24px;
  }

  .footer-cta__title {
    max-width: none;
    font-size: 23px;
  }

  .footer-cta__sub {
    font-size: 14.5px;
  }

  .footer__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-lg);
    padding-top: 36px;
    padding-bottom: 28px;
  }

  .footer__about,
  .footer__connect-text {
    max-width: none;
  }

  .footer__links a {
    padding-block: 10px;
  }

  .footer__bottom {
    font-size: 11.5px;
  }
}

@media (max-width: 479px) {
  .footer-cta {
    padding: 24px 20px;
  }

  .footer-cta__title {
    font-size: 21px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .footer__social-link,
  .footer__links a,
  .footer__bottom a {
    transition: none;
  }
}

/* Responsive ============================================================= */

/* Tablet: 768px – 1023px */
@media (max-width: 1023px) {
  .pricing .section-head h2 { font-size: 38px; }
  .section-head h2,
  .work__head h2 { font-size: 36px; }

  .services__grid,
  .work__grid,
  .process__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* The connector is drawn for a single row of four; once the cards wrap it
     would point at nothing, so it is dropped rather than re-aimed. */
  .process__track::before { display: none; }
  .process__cta { margin-top: 32px; }

  .pricing__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 680px;
    margin-inline: auto;
  }
}

/* Mobile: up to 767px */
@media (max-width: 767px) {

  .section { padding-block: 64px; }
  .pricing .section-head { margin-bottom: 30px; }
  .pricing .section-head h2 { font-size: 32px; }
  .pricing .section-head p { font-size: 16px; }
  .section-head h2,
  .work__head h2 { font-size: 30px; }
  .faq__title { font-size: 30px; }

  .services__grid,
  .work__grid,
  .process__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .pricing__grid {
    grid-template-columns: minmax(0, 1fr);
    max-width: 440px;
  }


  .step { padding: 22px 20px; }
  .step__icon { width: 44px; height: 44px; }
  .step__no { font-size: 30px; }

  .results { padding-top: 12px; }
  .results__panel { padding: 8px 12px; border-radius: 22px; }
  .results__head { max-width: 400px; margin-bottom: 15px; padding-inline: 8px; }
  .results__head h2 { font-size: 30px; line-height: 1.25; }
  .results__eyebrow { font-size: 12px; }
  .results__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .result { padding: 16px 10px; }
  .result:nth-child(3) { border-left: 0; }
  .result:nth-child(n + 3) { border-top: 1px solid var(--results-border); }
  .result__icon { width: 42px; height: 42px; margin-bottom: 6px; border-radius: 12px; }
  .result__value { font-size: clamp(36px, 7vw, 44px); }
  .result__label { display: flex; align-items: center; justify-content: center; min-height: 45px; margin-top: 10px; font-size: 15px; text-wrap: balance; }
  .result__detail { font-size: 13px; }

  .testimonial { padding-block: 8px 40px; }
  .testimonial__quote p { font-size: 22px; line-height: 1.4; }
  .testimonial__author { gap: 12px; margin-top: 18px; }
  .testimonial__role { font-size: 13px; }

  .faq { padding-block: 64px; }
}

/* Production refinements: compact composition and an actionable project brief. */






.work__note { max-width: 740px; font-size: 14px; line-height: 1.7; color: var(--text-muted); margin-bottom: 28px; }

.work-card__media img { width: 100%; height: 100%; display: block; transition: transform .25s ease; }
.work-card__media:hover img { transform: scale(1.035); }
.work-card__view { position: absolute; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 14px; padding: 10px 12px; background: var(--surface-dark); color: var(--surface-white); border-radius: 8px; font-size: 12px; font-weight: 700; box-shadow: var(--shadow-md); }
.work-card__media:focus-visible { outline-offset: -5px; outline-color: var(--surface-white); }
.sample-label { text-align: center; font: 700 13px var(--font-mono); letter-spacing: .06em; color: var(--text-muted); margin-bottom: 20px; }

/* The top stays tight because the FAQ above already contributes its own 56px
   of bottom padding; a short gap leads into the footer. */
.contact {
  padding: 12px 0 48px;
  background: linear-gradient(180deg, var(--surface-white), #f7f8fc);
}
.contact__grid {
  display: grid;
  width: calc(100% - var(--gutter) * 2);
  max-width: 1320px;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  align-items: stretch;
  gap: 0;
  padding: 0;
  border: 1px solid #e8e9f0;
  border-radius: 28px;
  background: var(--surface-white);
  box-shadow: 0 16px 40px -24px #25204b26, 0 3px 10px #25204b04;
}
.contact__intro {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  padding: 52px 56px;
  border-radius: 27px 0 0 27px;
  background: radial-gradient(ellipse at 0 0, #7768ff66, transparent 65%),
    radial-gradient(ellipse at 100% 100%, #6954ee88, transparent 65%),
    linear-gradient(145deg, #4b3dd0, #302477);
  color: var(--surface-white);
}
.contact__intro::before,
.contact__intro::after {
  content: '';
  position: absolute;
  z-index: -1;
  width: 400px;
  height: 400px;
  border: 1px solid #ffffff0d;
  border-radius: 50%;
  pointer-events: none;
}
.contact__intro::before { top: -255px; right: -120px; box-shadow: 0 0 0 48px #ffffff03, 0 0 0 96px #ffffff03; }
.contact__intro::after { bottom: -280px; right: -200px; box-shadow: 0 0 0 56px #ffffff03, 0 0 0 112px #ffffff03; }
.contact__brand { display: flex; align-items: center; gap: 11px; margin-bottom: 58px; font-size: 22px; font-weight: 800; letter-spacing: -.04em; }
.contact__brand-mark { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border: 1px solid #ffffff33; border-radius: 11px; background: #ffffff15; box-shadow: inset 0 1px 0 #ffffff12; }
.contact__brand-studio { margin-left: 4px; color: #e0dcff; font-size: 17px; font-weight: 500; letter-spacing: -.025em; }
.contact__intro .eyebrow { color: #ddd8ff; margin-bottom: 18px; font-size: 12px; font-weight: 600; letter-spacing: .17em; }
.contact__intro h2 { max-width: 430px; font-size: clamp(2rem, 3.4vw, 2.75rem); line-height: 1.15; letter-spacing: -.045em; text-wrap: balance; }
.contact__intro h2 span { color: #d8d1ff; }
.contact__intro > p { max-width: 430px; margin-top: 22px; color: #e0dcf8; font-size: 16px; line-height: 1.8; }
.contact__features { display: grid; gap: 28px; margin-block: 40px 44px; list-style: none; }
.contact__features li { display: flex; align-items: center; gap: 15px; }
.contact__feature-icon { display: grid; place-items: center; flex: 0 0 44px; height: 44px; border: 1px solid #ffffff26; border-radius: 12px; background: #ffffff0f; box-shadow: inset 0 1px 0 #ffffff08; color: #efedff; }
.contact__features h3 { font-size: 15px; font-weight: 600; line-height: 1.6; letter-spacing: -.015em; }
.contact__features p { margin-top: 4px; font-size: 14px; line-height: 1.6; color: #ded9f5; text-wrap: pretty; }
.contact__support { margin-top: auto; padding-top: 24px; border-top: 1px solid #ffffff26; }
.contact__support > p { font-size: 13px; line-height: 1.6; color: #d3cdec; }
.contact__email { display: inline-flex; gap: 20px; align-items: center; color: var(--surface-white); font-size: 14px; font-weight: 600; padding-block: 10px; }
.contact__email:hover { color: var(--surface-white); text-decoration: underline; text-underline-offset: 4px; }
.contact-form { display: flex; flex-direction: column; justify-content: center; padding: 52px 56px 40px; border-radius: 0 27px 27px 0; background: var(--surface-white); min-width: 0; }
.contact-form h3 { font-size: 32px; font-weight: 700; color: var(--text-primary); line-height: 1.25; letter-spacing: -.04em; }
.contact-form__help { margin: 10px 0 28px; font-size: 14px; line-height: 1.7; color: var(--text-muted); }
.contact-form__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.form-field { min-width: 0; margin-bottom: 18px; }
.form-field label { display: block; font-size: 12px; font-weight: 700; margin-bottom: 8px; }
.form-field label span { font-weight: 400; color: var(--text-muted); }
.form-field :is(input,select,textarea) { width: 100%; min-width: 0; min-height: 46px; padding: 12px; border: 1px solid var(--border-dark); border-radius: 8px; background: var(--surface-white); color: var(--text-primary); font: 13px var(--font-body); }
.form-field textarea { resize: vertical; line-height: 1.65; }
.form-field :is(input,select,textarea):focus { outline: 2px solid var(--primary); outline-offset: 2px; }
.required-star { color: var(--danger); margin-left: 2px; }
.contact-form__status{ margin-block: 16px; padding: 14px; background: var(--primary-tint); border-radius: 8px; font-size: 13px; line-height: 1.7; }
.contact-form__status a { font-weight: 700; text-decoration: underline; }
.contact-form button:disabled { opacity: .65; cursor: wait; }

/* Sign-up (the #contact section): Google, divider and password field. */
.btn-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-white);
  color: var(--text-primary);
  font: 600 14px var(--font-body);
  transition: background-color .15s, border-color .15s;
}
.btn-google:hover:not(:disabled) { background: var(--surface-light); border-color: var(--border-dark); }
.contact-form .btn-google:disabled { opacity: .6; cursor: not-allowed; }
.signup__note { margin-top: 8px; font-size: 12.5px; line-height: 1.6; color: var(--text-muted); text-align: center; }
.auth-divider {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin: var(--space-lg) 0;
  font-size: 13px;
  color: var(--text-muted);
}
.auth-divider::before,
.auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--border-default); }
.password-field { position: relative; }
.password-field input { padding-right: 48px; }
.password-toggle {
  position: absolute;
  top: 50%;
  right: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-muted);
  transform: translateY(-50%);
}
.password-toggle:hover { background: var(--primary-tint); color: var(--primary); }
.password-toggle .password-toggle__hide,
.password-toggle[aria-pressed="true"] .password-toggle__show { display: none; }
.password-toggle[aria-pressed="true"] .password-toggle__hide { display: block; }
.form-hint { margin-top: 6px; font-size: 12px; color: var(--text-muted); }
/* The long sign-up label wraps on narrow screens instead of clipping. */
#signup-submit { height: auto; min-height: 48px; padding-block: 12px; white-space: normal; text-wrap: balance; line-height: 1.35; }

/* Scoped onboarding polish keeps the shared form primitives unchanged. */
.contact .form-field { margin-bottom: 20px; }
.contact .form-field label { font-size: 14px; font-weight: 600; color: var(--text-primary); margin-bottom: 9px; }
.contact .form-field input {
  min-height: 56px;
  padding: 15px 16px;
  border-color: #dce0e8;
  border-radius: 10px;
  background: #fcfcfe;
  box-shadow: 0 1px 2px #10182803;
  font-size: 16px;
  line-height: 1.5;
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.contact .form-field input:hover { border-color: #b9bdcf; }
.contact .form-field input:focus { border-color: var(--primary); background: #fff; outline: 2px solid var(--primary); outline-offset: 2px; box-shadow: 0 0 0 5px #5b4bf50d; }
.contact .password-field input { padding-right: 54px; }
.contact .password-toggle { width: 40px; height: 40px; }
.contact .form-hint { margin-top: 8px; font-size: 13px; line-height: 1.6; }
.contact .signup__note { font-size: 13px; line-height: 1.6; }
.contact .btn-google { min-height: 56px; gap: 12px; border-color: #dce0e8; box-shadow: 0 2px 3px #10182804; }
.contact .btn-google svg { flex-shrink: 0; }
.contact .btn-google:hover:not(:disabled) { border-color: #b9bdcf; background: #f8f9fc; }
.contact .auth-divider { margin-block: 22px; color: #707687; font-size: 12px; }
.contact .auth-divider::before, .contact .auth-divider::after { background: #eceef3; }
.contact #signup-submit { min-height: 56px; padding: 15px 18px; gap: 10px; border: 1px solid #5041df; border-radius: 10px; background: linear-gradient(180deg, #6858f8, #5745e5); box-shadow: 0 3px 8px #5b4bf51a, inset 0 1px 0 #ffffff26; font-size: 14px; font-weight: 700; }
.contact #signup-submit:hover:not(:disabled) { background: linear-gradient(180deg, #5e4eeb, #4938d2); box-shadow: 0 4px 10px #5b4bf524, inset 0 1px 0 #ffffff26; }
.contact #signup-submit > span { flex-shrink: 0; }
.contact .contact-form__status { overflow-wrap: anywhere; }
.contact a:focus-visible, .contact button:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; }
.contact__intro a:focus-visible { outline-color: #fff; }

@media (min-width: 1024px) and (max-width: 1199px) {
  .contact__intro, .contact-form { padding: 36px; }
  .contact-form { padding-bottom: 36px; }
}
@media (max-width: 1023px) {
  .contact__grid { grid-template-columns: minmax(0, 1fr); max-width: 720px; }
  .contact__intro { padding: 40px; border-radius: 27px 27px 0 0; }
  .contact__brand { margin-bottom: 32px; }
  .contact__intro h2 { max-width: 500px; font-size: 38px; }
  .contact__intro > p { max-width: 520px; }
  .contact__features { margin-block: 28px 32px; gap: 20px; }
  .contact-form { padding: 40px; border-radius: 0 0 27px 27px; }
}
@media (max-width: 767px) {
  .contact { padding-bottom: 32px; }
  .contact__grid { border-radius: 22px; }
  .contact__intro { padding: 30px 24px; border-radius: 21px 21px 0 0; }
  .contact__brand { margin-bottom: 30px; }
  .contact__intro h2 { font-size: 32px; }
  .contact__intro > p { margin-top: 18px; }
  .contact__features li { gap: 12px; }
  .contact__features { gap: 18px; margin-block: 24px 28px; }
  .contact__feature-icon { flex-basis: 40px; height: 40px; }
  .contact__support { padding-top: 20px; }
  .contact-form { padding: 32px 24px 36px; border-radius: 0 0 21px 21px; }
  .contact-form h3 { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .contact .form-field input, .contact button { transition: none; }
}

.concept-open { overflow: hidden; }
.concept-dialog { width: min(880px, calc(100% - 32px)); max-height: calc(100dvh - 32px); padding: 0; margin: auto; border: 1px solid var(--border-default); border-radius: 16px; color: var(--text-primary); background: var(--surface-white); overflow-y: auto; box-shadow: var(--shadow-frame); }
.concept-dialog::backdrop { background: #0C0E13bd; backdrop-filter: blur(5px); }
.concept-dialog__head { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 16px 24px; }
.concept-dialog__head h2 { font-size: 20px; }
.concept-dialog__close { width: 44px; height: 44px; flex: none; font-size: 28px; border-radius: 8px; background: var(--surface-light); border: 1px solid var(--border-default); }
.concept-dialog > img { width: 100%; height: auto; display: block; }
.concept-dialog__body { padding: 24px; font-size: 15px; line-height: 1.7; }
.concept-dialog__note { font-size: 12px; color: var(--text-muted); margin-block: 12px 20px; }
@media (min-width: 768px) and (max-width: 1023px) {
  .work__grid { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
  .work-card__body { padding: 16px; }
  .work-card__view { font-size: 10px; padding: 8px; bottom: 8px; right: 8px; }
  .work-card__metric { flex-wrap: wrap; }
}
@media (max-width: 767px) {
  .services { padding: 36px 0 48px; }
  .section, .process, .faq { padding-block: 48px; }
  .work__head { gap: 18px; }
  .work__note { font-size: 13px; }
  .work-card__media { aspect-ratio: 8 / 5; }
  .work-card__body { padding: 20px; }
  .form-field :is(input,select,textarea) { font-size: 16px; }
  .concept-dialog__head { padding: 12px 16px; }
  .concept-dialog__head h2 { font-size: 16px; }
  .concept-dialog__body { padding: 18px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .work-card__media img { transition: none; }
}

/* 4b. Category video gallery =============================================
   Card CTA + the modal portfolio viewer it opens. Posters are CSS gradients
   until real footage is supplied, so the section costs no media requests. */
.service-card__count {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 5px 9px;
  border-radius: var(--radius-full);
  background: #FFFFFFEB;
  border: 1px solid #FFFFFF;
  color: #4E4470;
  font: 700 9.5px var(--font-mono);
  letter-spacing: .08em;
  box-shadow: 0 2px 8px #342B5614;
}

/* Secondary CTA: stretched to the card's content width so every card's
   button has identical width, and pinned to the bottom by the description's
   flex:1 so they line up across the row regardless of copy length. */
.service-card__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 44px;
  margin-top: 22px;
  padding: 0 16px;
  border: 1px solid #DED7F8;
  border-radius: 11px;
  background: #F6F4FE;
  color: #5548E7;
  font: 700 13px var(--font-body);
  line-height: 1;
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease;
}

.service-card__cta svg { flex: none; transition: transform .18s ease; }

.service-card__cta:hover {
  background: #EFEBFD;
  border-color: #C6BAF4;
  color: #4536C9;
  box-shadow: 0 2px 10px #5548E714;
}

.service-card__cta:hover svg { transform: translateX(3px); }

.service-card__cta:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Modal shell ----------------------------------------------------------- */
.vgal {
  width: min(1140px, calc(100% - 40px));
  max-height: calc(100dvh - 40px);
  padding: 0;
  margin: auto;
  overflow: hidden;
  border: 1px solid #E4E0F1;
  border-radius: 20px;
  background: #FFFFFF;
  color: var(--text-primary);
  box-shadow: 0 40px 90px -24px #2B24566B, 0 8px 24px #2B245612;
}

.vgal::backdrop {
  background: #1E1937C4;
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
}

.vgal[open] { animation: vgal-in .22s ease-out; }

@keyframes vgal-in {
  from { opacity: 0; transform: translateY(8px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

body.vgal-open { overflow: hidden; }

/* Header: compact, single row of meaning ------------------------------- */
.vgal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 20px 14px;
  border-bottom: 1px solid #F0EDF8;
  background: linear-gradient(180deg, #FBFAFF, #FFFFFF);
}

.vgal__heading { min-width: 0; }

.vgal__eyebrow {
  margin: 0 0 4px;
  font: 700 10px var(--font-mono);
  letter-spacing: .1em;
  color: var(--primary);
}

.vgal__title {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.25;
}

.vgal__desc {
  margin: 4px 0 0;
  max-width: 70ch;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
}

.vgal__close {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid #E5E1F2;
  border-radius: 9px;
  background: #FFFFFF;
  color: #55507A;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.vgal__close:hover {
  background: var(--primary-tint);
  border-color: #D6CEF7;
  color: var(--primary);
}

/* Body: 71 / 29 split ---------------------------------------------------- */
.vgal__body {
  display: grid;
  grid-template-columns: minmax(0, 71fr) minmax(0, 29fr);
  gap: 22px;
  padding: 20px;
}

.vgal__stage { min-width: 0; }

.vgal__player {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid #E6E2F3;
  border-radius: var(--radius-xl);
  background: #F2EFFA;
}

.vgal__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #0E0B1C;
}

.vgal__poster {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  width: 100%;
  height: 100%;
}

.vgal__playbtn {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  padding-left: 4px;
  border: 1px solid #FFFFFF;
  border-radius: 50%;
  background: #FFFFFFE0;
  color: var(--primary);
  box-shadow: 0 6px 20px #342B5622;
  cursor: pointer;
  transition: transform .18s ease, background-color .15s ease;
}

.vgal__playbtn:hover:not(:disabled) { transform: scale(1.06); background: #FFFFFF; }
.vgal__playbtn:disabled { cursor: not-allowed; color: #8981AE; }

.vgal__pending {
  margin: 0;
  font: 700 10.5px var(--font-mono);
  letter-spacing: .08em;
  color: #6F688F;
}

/* Active video information, centred under the player -------------------- */
.vgal__meta {
  margin-top: 12px;
  text-align: center;
}

/* Body sans-serif, stated explicitly so this never picks up the mono stack
   used elsewhere in the modal. Semibold reads as premium next to the heavier
   category heading above it. */
.vgal__now {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.35;
  color: var(--text-primary);
}

/* Sidebar --------------------------------------------------------------- */
.vgal__aside {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.vgal__aside-label {
  margin: 0 0 10px;
  font: 700 10px var(--font-mono);
  letter-spacing: .1em;
  color: #7D7695;
}

/* Three items, sized to fit: no internal scrollbar and nothing clipped. */
.vgal__rail {
  display: grid;
  grid-auto-rows: max-content;
  gap: 10px;
  min-width: 0;
}

.vgal__thumb {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  width: 100%;
  padding: 8px;
  border: 1px solid #ECE9F6;
  border-radius: 13px;
  background: #FFFFFF;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.vgal__thumb:hover {
  border-color: #C6BAF4;
  background: #FBFAFF;
  box-shadow: 0 4px 14px #5548E714;
  transform: translateY(-1px);
}

.vgal__thumb:focus-visible {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px #5548E740;
}

.vgal__shot {
  position: relative;
  display: grid;
  place-items: center;
  width: 92px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 9px;
  background: #F1EDFB;
}

.vgal__shot img { width: 100%; height: 100%; object-fit: cover; }

/* Play cue appears on hover/focus, keeping the resting state calm. */
.vgal__cue {
  position: absolute;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding-left: 2px;
  border-radius: 50%;
  background: #FFFFFFD9;
  color: var(--primary);
  opacity: 0;
  transform: scale(.9);
  transition: opacity .15s ease, transform .15s ease;
}

.vgal__thumb:hover .vgal__cue,
.vgal__thumb:focus-visible .vgal__cue { opacity: 1; transform: none; }

.vgal__thumb-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.vgal__thumb-title {
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -.01em;
  color: var(--text-primary);
}

.vgal__thumb-runtime { font: 10.5px var(--font-mono); color: var(--text-muted); }

/* Placeholder poster tones (shared by stage and rail) -------------------- */
.vgal__poster--violet, .vgal__shot--violet { background: linear-gradient(140deg, #EFEBFE, #DCD4FA); }
.vgal__poster--indigo, .vgal__shot--indigo { background: linear-gradient(140deg, #EAEAFE, #D3D6F9); }
.vgal__poster--plum,   .vgal__shot--plum   { background: linear-gradient(140deg, #F3E9FB, #E2D0F5); }
.vgal__poster--grape,  .vgal__shot--grape  { background: linear-gradient(140deg, #EEE8FB, #D8CCF4); }
.vgal__poster--amber,  .vgal__shot--amber  { background: linear-gradient(140deg, #FCF1E2, #F7DFC0); }
.vgal__poster--sunset, .vgal__shot--sunset { background: linear-gradient(140deg, #FDEEE8, #F8D7C8); }
.vgal__poster--clay,   .vgal__shot--clay   { background: linear-gradient(140deg, #F9EFE9, #EFD8C7); }
.vgal__poster--ember,  .vgal__shot--ember  { background: linear-gradient(140deg, #FCEDEA, #F5D2CA); }
.vgal__poster--teal,   .vgal__shot--teal   { background: linear-gradient(140deg, #E6F5F2, #C9E8E1); }
.vgal__poster--jade,   .vgal__shot--jade   { background: linear-gradient(140deg, #E8F5EC, #CCE8D6); }
.vgal__poster--sea,    .vgal__shot--sea    { background: linear-gradient(140deg, #E5F3F7, #C7E4EE); }
.vgal__poster--moss,   .vgal__shot--moss   { background: linear-gradient(140deg, #EDF4E7, #D5E7C8); }
.vgal__poster--azure,  .vgal__shot--azure  { background: linear-gradient(140deg, #E7F0FC, #C9DCF7); }
.vgal__poster--sky,    .vgal__shot--sky    { background: linear-gradient(140deg, #E6F3FC, #C6E2F6); }
.vgal__poster--cobalt, .vgal__shot--cobalt { background: linear-gradient(140deg, #E8ECFB, #CBD5F4); }
.vgal__poster--steel,  .vgal__shot--steel  { background: linear-gradient(140deg, #EDEFF4, #D2D7E3); }
.vgal__poster--rose,   .vgal__shot--rose   { background: linear-gradient(140deg, #FBEBF1, #F3CCDC); }
.vgal__poster--blush,  .vgal__shot--blush  { background: linear-gradient(140deg, #FCEEF0, #F5D2D8); }
.vgal__poster--mauve,  .vgal__shot--mauve  { background: linear-gradient(140deg, #F4EAF3, #E3CDE2); }
.vgal__poster--orchid, .vgal__shot--orchid { background: linear-gradient(140deg, #F5E9F8, #E4CDF0); }

/* Short viewports: let the modal scroll as a whole rather than trapping a
   scrollbar inside the sidebar. */
@media (min-width: 900px) and (max-height: 720px) {
  .vgal { max-height: calc(100dvh - 24px); }
  .vgal__body { max-height: calc(100dvh - 140px); overflow-y: auto; }
}

/* Tablet and below: stage on top, list beneath as a scrollable row ------- */
@media (max-width: 899px) {
  .vgal {
    width: 100%;
    max-width: none;
    height: 100dvh;
    max-height: 100dvh;
    border: 0;
    border-radius: 0;
  }

  .vgal__head { padding: 14px 16px 12px; }
  .vgal__title { font-size: 17px; }
  .vgal__desc { font-size: 12.5px; }

  .vgal__body {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    padding: 16px;
    overflow-y: auto;
  }

  .vgal__meta { margin-top: 11px; }
  .vgal__now { font-size: 15.5px; }

  .vgal__rail {
    grid-auto-flow: column;
    grid-auto-columns: 216px;
    grid-auto-rows: auto;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }

  .vgal__thumb { scroll-snap-align: start; min-height: 58px; }
  .vgal__thumb:hover { transform: none; }
  .vgal__playbtn { width: 56px; height: 56px; }
  /* Touch has no hover, so keep the cue visible. */
  .vgal__cue { opacity: 1; transform: none; }
}

@media (max-width: 479px) {
  .vgal__rail { grid-auto-columns: 190px; }
  .vgal__thumb { grid-template-columns: 76px minmax(0, 1fr); }
  .vgal__shot { width: 76px; }
  .vgal__now { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .vgal[open] { animation: none; }
  .vgal__playbtn:hover:not(:disabled),
  .vgal__thumb:hover { transform: none; }
}

/* One line under the pricing cards: what the price covers, and when it is paid. */
.pricing__note {
  max-width: 760px;
  margin: var(--space-xl) auto 0;
  color: var(--text-muted);
  font-size: var(--text-meta);
  line-height: var(--leading-relaxed);
  text-align: center;
}