/* ============================================================
   EXLIVE — authorized refinements.
   Everything here is additive and lives in one file on purpose:
   deleting this stylesheet returns the page to the imported design.
   Palette, background, WebGL and section content are untouched.
   ============================================================ */

/* ---------- 5. The first screen has to fit on one screen ----------
   The imported hero mixed a 100vh container with fixed inner sizes
   (500px logo, a 140px padding under "Agency", -160px margins), so its
   content ran 1030-1146px tall and the CTA fell below the fold on a
   1366x768 laptop. Every vertical size below is tied to the viewport. */

#hero {
  min-height: 100vh;
  min-height: 100svh;
  padding-top: clamp(4.5rem, 10vh, 8rem);
  padding-bottom: clamp(1.25rem, 3.5vh, 3.5rem);
}

/* The single largest fixed gap in the layout. */
#hero h1 .hero-line {
  padding-bottom: clamp(0.25rem, 1.5vh, 1rem);
}

/* Cap the headline by height as well as width, so short screens shrink it. */
#hero h1 {
  font-size: clamp(2.25rem, min(7.6vw, 10.5vh), 6rem);
}

/* Was a fixed 300/380/432/500px ladder that ignored screen height.
   Hooked to the wrapper class, not to alt text, which is content and can change. */
#hero .hero-logo-wrapper img {
  height: clamp(150px, 27vh, 460px);
}

#hero .hero-desc {
  font-size: clamp(0.95rem, 1.7vh, 1.125rem);
}

#hero .hero-stats {
  margin-top: clamp(0.75rem, 2.6vh, 3.5rem);
}

#hero .hero-cta {
  gap: clamp(0.6rem, 1.5vh, 1rem);
}

#hero .btn-primary,
#hero .btn-ghost {
  padding: clamp(0.7rem, 1.7vh, 1rem) clamp(1.1rem, 2vw, 1.5rem);
}

/* Keep the logo overlapping the headline on narrow screens, but in
   proportion to the screen instead of a fixed -160px. */
@media (max-width: 1023px) {
  #hero .hero-logo-wrapper {
    margin-top: clamp(-9rem, -12vh, -4rem);
  }
}

/* Short phones (iPhone SE and similar) need the stats row tightened too. */
@media (max-height: 700px) and (max-width: 767px) {
  #hero .hero-stats {
    margin-top: 0.5rem;
    gap: 0.5rem 2rem;
  }

  #hero .hero-stats .stat-number,
  #hero .hero-stats span:first-child {
    font-size: 1.15rem;
    line-height: 1.25;
  }
}

/* Very short windows: drop the stats rather than push the CTA off-screen. */
@media (max-height: 620px) and (min-width: 1024px) {
  #hero .hero-stats { display: none; }
}

/* ---------- 2. Top bar ---------- */

#site-header {
  transition: background-color 0.35s var(--ease-out-quart),
              box-shadow 0.35s var(--ease-out-quart),
              border-color 0.35s var(--ease-out-quart);
}

#site-header > div {
  transition: padding-top 0.35s var(--ease-out-quart),
              padding-bottom 0.35s var(--ease-out-quart);
}

/* Once scrolled the bar tightens and gains contrast, giving the content
   back roughly 30px of height and separating it from the page. */
#site-header.is-scrolled {
  background-color: rgba(9, 7, 11, 0.86);
  border-bottom-color: rgba(236, 72, 153, 0.34);
  box-shadow: 0 14px 34px -18px rgba(0, 0, 0, 0.9);
}

@media (min-width: 768px) {
  #site-header.is-scrolled > div {
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
  }
}

#site-header.is-scrolled .logo-badge-nav img {
  height: 1.85rem;
}

#site-header .logo-badge-nav img {
  transition: height 0.35s var(--ease-out-quart);
}

/* The underline already exists on hover; the active section now keeps it. */
.nav-link.is-active {
  color: var(--pink-400);
}

.nav-link.is-active::after {
  width: 100%;
}

.nav-link:focus-visible,
.mobile-link:focus-visible {
  outline: 2px solid var(--pink-400);
  outline-offset: 6px;
  border-radius: 2px;
}

/* ---------- 1. "Почати" in the top bar ---------- */

header a[href="#apply"] {
  padding: 0.6rem 1.2rem;
  letter-spacing: 0.14em;
  border-radius: 0.6rem;
  transition: transform 0.28s var(--ease-out-quart),
              box-shadow 0.28s var(--ease-out-quart),
              filter 0.28s var(--ease-out-quart);
  will-change: transform;
}

/* The imported hover faded the gradient with opacity, which read as the
   button greying out. Brightening it keeps the colour and lifts instead. */
header a[href="#apply"]:hover {
  opacity: 1;
  filter: brightness(1.09) saturate(1.05);
  transform: translateY(-1px) scale(1.03);
  box-shadow: 0 10px 28px -8px rgba(236, 72, 153, 0.75),
              0 0 0 1px rgba(255, 255, 255, 0.08) inset;
}

header a[href="#apply"]:active {
  transform: translateY(0) scale(0.975);
  box-shadow: 0 4px 12px -6px rgba(236, 72, 153, 0.6);
}

header a[href="#apply"]:focus-visible {
  outline: 2px solid #f9a8d4;
  outline-offset: 3px;
}

/* The main conversion action was hidden below 640px, exactly where most
   of this audience is. Show it, compactly. */
@media (max-width: 639px) {
  header a[href="#apply"] {
    display: inline-flex;
    padding: 0.5rem 0.85rem;
    font-size: 0.65rem;
    letter-spacing: 0.1em;
  }
}

/* ---------- 3. Blocks ---------- */

/* Consistent vertical rhythm: the imported sections varied between
   py-16/py-20/py-24 with no pattern. */
main > section,
body > section {
  scroll-margin-top: 6rem;
}

/* Cards shared a hover that only changed the border; give them the same
   small lift so the whole page responds the same way. */
.case-card,
.team-card {
  transition: transform 0.45s var(--ease-out-quart),
              border-color 0.45s var(--ease-out-quart),
              box-shadow 0.45s var(--ease-out-quart);
  will-change: transform;
}

.case-card:hover,
.team-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 60px -30px rgba(236, 72, 153, 0.55);
}

/* Keyboard users get the same affordance as the mouse hover. */
.case-card:focus-within,
.team-card:focus-within {
  transform: translateY(-4px);
  border-color: rgba(236, 72, 153, 0.55);
}

/* ---------- FAQ ----------
   The imported block gave every one of the seven cards its own randomised pair of
   blurred pink blobs (the template comments spell out a different "fill %" per card):
   14 blobs, 21 hover transitions and 7 gradient-clipped numerals in one section.
   The content is unchanged. One surface, one accent, one hover - repeated identically,
   so the eye reads a set rather than noise. */

.heading-plain {
  /* The blurred black plate behind the section headings was a contrast patch. */
  padding: 0;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.75);
}

/* Sits in the section container, so it starts on the same left edge as every
   other section instead of floating in a centred column of its own. */
.faq-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  align-items: stretch;
}

@media (min-width: 768px) {
  .faq-grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
  /* Seven items over three columns leave a single orphan; the last one takes the row. */
  .faq-card:last-child { grid-column: 1 / -1; }
}

@media (min-width: 1024px) {
  .faq-grid { grid-template-columns: repeat(3, 1fr); }
}

.faq-card {
  display: flex;
  flex-direction: column;
  padding: 1.6rem 1.6rem 1.75rem;
  border: 1px solid var(--pink-border);
  border-radius: 1rem;
  background: var(--glass-700);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  transition: border-color 0.35s var(--ease-out-quart),
              transform 0.35s var(--ease-out-quart),
              box-shadow 0.35s var(--ease-out-quart);
}

.faq-card:hover {
  border-color: rgba(236, 72, 153, 0.55);
  transform: translateY(-3px);
  box-shadow: 0 20px 44px -24px rgba(236, 72, 153, 0.5);
}

/* Quiet and tabular, with a short rule that is identical on every card.
   The gradient-clipped 3xl numeral was the loudest generic tell in the block. */
.faq-index {
  display: block;
  font-family: 'Inter', system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--pink-400);
  padding-bottom: 0.7rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid rgba(236, 72, 153, 0.22);
}

.faq-question {
  margin: 0 0 0.7rem;
  font-family: 'Unbounded', system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(1rem, 1.15vw, 1.12rem);
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: #fff;
}

.faq-answer {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.78);
}

@media (max-width: 640px) {
  .faq-card { padding: 1.35rem; }
}

/* ---------- 4. Motion ---------- */

/* Carousel controls and FAQ toggles had no pressed state. */
.carousel-progress-dot {
  transition: transform 0.3s var(--ease-out-quart), background-color 0.3s;
}

.carousel-progress-dot:hover {
  transform: scale(1.35);
}

/* These arrows are centred with Tailwind's translate utilities, which live in the same
   `transform` property. Setting `transform` here wholesale dropped the centring and threw
   the button ~28px down the moment it was hovered or pressed. Drive Tailwind's own scale
   variables instead, and keep transform out of the transition so nothing drifts. */
#carousel-prev,
#carousel-next {
  transition-property: color, background-color, border-color, box-shadow, opacity;
}

/* Pin the centring for every state. The hover and active utilities recompute `transform`
   and were dropping the -translate-y-1/2 that centres these buttons, throwing them ~28px
   down the page. A navigation control must not move while you are aiming at it, so the
   feedback is colour and surface only. */
#carousel-prev { transform: translate(-0.5rem, -50%) !important; }
#carousel-next { transform: translate(0.5rem, -50%) !important; }

@media (min-width: 768px) {
  #carousel-prev { transform: translate(-1rem, -50%) !important; }
  #carousel-next { transform: translate(1rem, -50%) !important; }
}

#carousel-prev:hover,
#carousel-next:hover {
  background: rgba(236, 72, 153, 0.16);
  box-shadow: 0 0 0 1px rgba(236, 72, 153, 0.45);
}

#carousel-prev:active,
#carousel-next:active {
  background: rgba(236, 72, 153, 0.28);
}

#carousel-prev:focus-visible,
#carousel-next:focus-visible {
  outline: 2px solid var(--pink-300);
  outline-offset: 3px;
}

/* Anything that moves must stop moving when the visitor asks it to.
   Navigation, carousel and form stay fully operable. */
@media (prefers-reduced-motion: reduce) {
  #site-header,
  #site-header > div,
  .case-card,
  .team-card,
  header a[href="#apply"],
  .carousel-progress-dot {
    transition: none;
  }

  .case-card:hover,
  .team-card:hover,
  header a[href="#apply"]:hover {
    transform: none;
  }

  .faq-card { transition: none; }
  .faq-card:hover { transform: none; }
}

/* ---------- Application form ----------
   Five glass inputs floated separately over the animated background, each label
   wearing its own blurred black plate to stay legible. One panel, one label style,
   and the short fields paired so the form stops being a long column. */

#applicationForm {
  max-width: 34rem;
  padding: 1.75rem;
  border: 1px solid var(--pink-border);
  border-radius: 1.25rem;
  background: var(--glass-700);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  box-shadow: 0 18px 50px -26px rgba(0, 0, 0, 0.85);
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.05rem;
}

/* space-y-* sets margins between siblings, which fights the grid gap. */
#applicationForm > * + * {
  margin-top: 0;
}

@media (min-width: 640px) {
  #applicationForm {
    grid-template-columns: 1fr 1fr;
    gap: 1.05rem 1rem;
    padding: 2rem;
  }
  /* Name, the message and the button always take the full row. */
  #applicationForm > .form-group:first-of-type,
  #applicationForm > #formMessage,
  #applicationForm > #submitBtn {
    grid-column: 1 / -1;
  }
}

.form-label {
  display: block;
  margin-bottom: 0.5rem;
  /* Line the label up with the text inside the field, not with the field's edge. */
  margin-left: calc(1rem + 1px);
  padding: 0;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: rgba(255, 255, 255, 0.62);
  letter-spacing: 0.14em;
}

.form-group:focus-within .form-label {
  color: var(--pink-400);
}

.form-input {
  border-radius: 0.7rem;
  /* main.css zeroes the horizontal padding from 768px up ("padding: 0.85rem 0" under
     "Desktop form enhancements"), which glued the placeholder to the field's border while
     the icon kept its room on the right. Restore the inset and keep space for the icon. */
  padding: 0.95rem 3rem 0.95rem 1rem;
  transition: border-color 0.25s, box-shadow 0.25s, background-color 0.25s;
}

.form-input:focus {
  background: var(--glass-700);
  box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.18);
}

/* The spinner arrows on the age field collided with its icon. */
.form-input[type='number'] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.form-input[type='number']::-webkit-outer-spin-button,
.form-input[type='number']::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* The field icons were as bright as the value the visitor types. */
.form-group .absolute svg {
  color: rgba(255, 255, 255, 0.32);
  transition: color 0.25s;
}

.form-group:focus-within .absolute svg {
  color: var(--pink-400);
}

/* Only flag a field the visitor has actually filled in and left. */
.form-input:invalid:not(:placeholder-shown):not(:focus) {
  border-color: rgba(255, 107, 107, 0.75);
  box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.12);
}

.form-input:valid:not(:placeholder-shown) {
  border-color: rgba(236, 72, 153, 0.5);
}

#submitBtn {
  margin-top: 0.25rem;
  border-radius: 0.8rem;
  transition: filter 0.25s var(--ease-out-quart), box-shadow 0.25s var(--ease-out-quart),
              transform 0.25s var(--ease-out-quart);
}

/* hover:scale-[1.02] on a 538px-wide button moves its edges ~5px each way, which reads
   as the button swelling under the pointer. A lift keeps the feedback without the shift. */
#submitBtn:hover {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translateY(-1px);
  filter: brightness(1.07);
}

#submitBtn:active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translateY(0);
  filter: brightness(0.96);
}

#submitBtn:focus-visible {
  outline: 2px solid #f9a8d4;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .form-input,
  .form-group .absolute svg { transition: none; }
}

/* The imported markup sets .form-message-success / -error, but neither class was ever
   styled: a rejected application and a delivered one looked identical, both plain white
   text. This is the one moment the visitor actually needs to read. */

/* Tailwind's .hidden and .form-message have the same specificity and refine.css loads
   last, so without this the empty message box wins the cascade and its ::before icon
   paints as a stray white square between the fields and the button. */
.form-message.hidden {
  display: none;
}

.form-message {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin: 0;
  padding: 0.85rem 1rem;
  border: 1px solid transparent;
  border-radius: 0.7rem;
  font-size: 0.9rem;
  line-height: 1.5;
}

.form-message::before {
  content: '';
  flex: 0 0 auto;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.06rem;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.form-message-success {
  color: #6ee7b7;
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.4);
}

.form-message-success::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}

.form-message-error {
  color: #fca5a5;
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.42);
}

.form-message-error::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v5M12 16.5v.01'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v5M12 16.5v.01'/%3E%3C/svg%3E");
}

/* ---------- Case cards on phones ----------
   The imported card stacked a centred 280px-wide photo above the name and the two stat
   boxes, so six cases ran 3180px tall on an 844px screen - roughly four screens of
   scrolling. Side by side, the same content reads in a third of the height and the photo
   finally uses the card's full width. Desktop (>=768px) is untouched. */

@media (max-width: 767px) {
  .case-card {
    grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
    align-items: center;
    gap: 0.9rem;
    padding: 0.85rem;
  }

  /* The frame was capped at 280px and centred inside a 350px card. */
  .case-photo > div {
    max-width: none;
    padding: 0.3rem;
  }

  /* The source photos have different aspect ratios, which made every card a different
     height and the row of cases read as ragged. One ratio, cropped to fill. */
  .case-photo img {
    width: 100%;
    aspect-ratio: 3 / 4;
    height: auto;
    max-height: none;
    object-fit: cover;
    object-position: center top;
  }

  .case-body h3 {
    font-size: 1.15rem;
    line-height: 1.2;
  }

  /* Two stat boxes side by side do not fit the narrower column. */
  .case-body > .grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.4rem;
    margin-top: 0.6rem;
  }

  .case-body > .grid > div {
    padding: 0.5rem 0.7rem;
  }

  .case-body > .grid span:first-child,
  .case-body > .grid .stat-number {
    font-size: 1.05rem;
    line-height: 1.2;
  }

  .cases-track {
    gap: 0.85rem;
  }

  /* Each card carries two blurred pink circles sized for the 594px desktop card:
     w-80 (360px) and w-96 (432px). On a 350px card one of them covers the whole surface,
     so the cards washed out to different brightnesses and their edges disappeared.
     The card already sits on the same glass as the FAQ cards, which is enough. */
  .case-card > .absolute {
    display: none;
  }
}

/* ---------- Case cards on desktop ----------
   In the pinned horizontal scroll the cards were flex items with no basis, so each one
   sized itself from its own content: widths ran 521-967px and every photo was a different
   shape. Equal cards and one photo ratio make the row read as a set. */

@media (min-width: 768px) {
  .cases-track {
    align-items: stretch;
  }

  .case-card {
    flex: 0 0 34rem;
    width: 34rem;
  }

  .case-photo img {
    width: 100%;
    aspect-ratio: 3 / 4;
    height: auto;
    max-height: 310px;
    object-fit: cover;
    object-position: center top;
  }

  /* "$2-2.5 тис." wrapped onto a second line in one card and not the others. */
  .case-body > .grid span:first-child,
  .case-body > .grid .stat-number {
    white-space: nowrap;
  }
}

/* ---------- Article pages ----------
   Standalone content pages under /<slug>/. They reuse the landing page's header, footer,
   palette and type, so the only new rules are the ones a long read actually needs:
   a measured column, breathing room between blocks and a readable line length. */

.article-page {
  position: relative;
  z-index: 1;
  padding: clamp(7rem, 14vh, 10rem) 1.25rem clamp(3rem, 8vh, 5rem);
}

.article-body {
  max-width: 44rem;
  margin: 0 auto;
}

.article-crumbs {
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 1.6rem;
}

.article-crumbs a {
  color: var(--pink-400);
  text-decoration: none;
}

.article-crumbs a:hover {
  text-decoration: underline;
}

.article-body h1 {
  font-family: 'Unbounded', system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(1.9rem, 4.5vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin: 0 0 1.25rem;
  color: #fff;
}

.article-lead {
  font-size: clamp(1.02rem, 2.2vw, 1.2rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.86);
  margin: 0 0 2.5rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(236, 72, 153, 0.25);
}

.article-body h2 {
  font-family: 'Unbounded', system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(1.25rem, 2.6vw, 1.6rem);
  line-height: 1.25;
  letter-spacing: -0.015em;
  margin: 2.6rem 0 0.9rem;
  color: #fff;
}

.article-body h2:first-of-type {
  margin-top: 0;
}

.article-body p {
  /* ~70 characters per line is the comfortable range for sustained reading. */
  max-width: 68ch;
  margin: 0 0 1.05rem;
  font-size: 1rem;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.8);
}

.article-cta {
  margin-top: 3rem;
  padding: 1.75rem;
  border: 1px solid var(--pink-border);
  border-radius: 1.25rem;
  background: var(--glass-700);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
}

.article-cta p {
  margin: 0 0 1.2rem;
  color: rgba(255, 255, 255, 0.9);
}

/* Cross-links from the landing page's footer navigation. */
.footer-articles {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.footer-articles a {
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  font-size: 0.9rem;
  line-height: 1.4;
  transition: color 0.25s;
}

.footer-articles a:hover {
  color: var(--pink-400);
}

/* ============================================================
   Conversion landing page (its own subdomain).
   Reuses the palette, glass surfaces and form styles from the main site; adds only the
   layout of a single-purpose page. Everything that offers a way out is deliberately absent.
   ============================================================ */

.lp-body {
  margin: 0;
  min-height: 100vh;
  background: #08070a;
  color: #fff;
  font-family: 'Inter', system-ui, sans-serif;
  overflow-x: hidden;
}

/* One static glow instead of the main site's animated backdrop: on a landing page the
   background must not compete with the form. */
.lp-glow {
  position: fixed;
  inset: -20% -10% auto -10%;
  height: 70vh;
  background:
    radial-gradient(60% 60% at 25% 20%, rgba(236, 72, 153, 0.28), transparent 70%),
    radial-gradient(55% 55% at 80% 10%, rgba(219, 39, 119, 0.22), transparent 70%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
}

.lp-page {
  position: relative;
  z-index: 1;
  max-width: 46rem;
  margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 2.5rem) 1.25rem clamp(3rem, 8vh, 5rem);
}

.lp-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: clamp(2rem, 6vh, 3.5rem);
}

.lp-logo {
  width: 2.4rem;
  height: 2.4rem;
  object-fit: contain;
}

.lp-wordmark {
  font-family: 'Unbounded', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
}

.lp-hero h1 {
  margin: 0 0 0.9rem;
  font-family: 'Unbounded', system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(1.9rem, 6vw, 3.1rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.lp-lead {
  margin: 0 0 1.75rem;
  max-width: 34rem;
  font-size: clamp(1rem, 2.2vw, 1.15rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
}

.lp-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2.5rem;
  margin-bottom: clamp(2rem, 5vh, 3rem);
}

.lp-stat {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.lp-stat-value {
  font-family: 'Unbounded', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(1.35rem, 3.5vw, 1.75rem);
  color: var(--pink-400);
  line-height: 1.1;
}

.lp-stat-label {
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.lp-video {
  margin-bottom: clamp(2.5rem, 6vh, 3.5rem);
}

.lp-video .video-container {
  width: 100%;
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid var(--pink-border);
  box-shadow: 0 20px 60px -30px rgba(236, 72, 153, 0.6);
}

.lp-video iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
}

.lp-video-note {
  margin: 0.75rem 0 0;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
}

.lp-form h2 {
  margin: 0 0 0.5rem;
  font-family: 'Unbounded', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(1.5rem, 4vw, 2rem);
  letter-spacing: -0.02em;
}

.lp-form-note {
  margin: 0 0 1.5rem;
  font-size: 0.95rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.7);
}

/* The form itself keeps the main site's panel styling from the block above. */
.lp-form #applicationForm {
  max-width: none;
  margin: 0;
}

.lp-faq {
  margin-top: clamp(2.5rem, 6vh, 3.5rem);
  display: grid;
  gap: 0.85rem;
}

.lp-faq-item {
  padding: 1.25rem 1.35rem;
  border: 1px solid rgba(236, 72, 153, 0.25);
  border-radius: 0.9rem;
  background: var(--glass-700);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.lp-faq-item h3 {
  margin: 0 0 0.5rem;
  font-family: 'Unbounded', system-ui, sans-serif;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.35;
}

.lp-faq-item p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.78);
}

.lp-footer {
  margin-top: clamp(2.5rem, 6vh, 3.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
}

.lp-social {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 1rem;
}

.lp-footer a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
}

.lp-footer a:hover {
  color: var(--pink-400);
}

@media (prefers-reduced-motion: reduce) {
  .lp-glow { filter: blur(40px); }
}