/* ============================================
   PELICAD - /demo landing page (paid traffic)
   ============================================
   Only the parts of /demo that differ from the home page live here. Everything the two pages
   share — hero, marquee, before/after slider, gallery, features, FAQ, CTA banner — keeps
   using css/pages/home.css, so a change to the home page's look carries over automatically.

   What is page-specific:
     .demo-nav        stripped-down header (no menu, no login, one CTA)
     .demo-sticky-cta phone-only bottom bar, so the CTA is always one tap away
     .demo-book       the booking section built around Yannic's photo
     .demo-footer     legal links and awards only
   ============================================ */

/* ---- Limited nav ----
   Unlike .nav on the rest of the site this one scrolls away with the page instead of being
   fixed. On a landing page the sticky CTA below covers the "always reachable" job on phones,
   and on desktop the page is short enough that a fixed bar only costs vertical space. */
.demo-nav {
  background: rgba(255, 255, 255, .95);
  border-bottom: 1px solid rgba(20, 36, 52, .09);
  backdrop-filter: blur(16px);
  position: relative;
  z-index: 50;
}

.demo-nav__inner {
  align-items: center;
  display: grid;
  gap: 18px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-height: 72px;
}

.demo-nav__logo img {
  height: 42px;
  width: auto;
}

/* Clickable: it reads as a promise about the demo, so it books one. */
.demo-nav__message {
  align-items: center;
  background: rgba(174, 247, 183, .22);
  border: 1px solid rgba(20, 36, 52, .08);
  border-radius: var(--radius);
  display: inline-flex;
  gap: 10px;
  justify-self: center;
  max-width: min(620px, 100%);
  padding: 8px 14px;
  transition: background .18s var(--ease), border-color .18s var(--ease);
}

.demo-nav__message:hover,
.demo-nav__message:focus-visible {
  background: rgba(174, 247, 183, .42);
  border-color: rgba(20, 36, 52, .18);
}

.demo-nav__message span {
  color: var(--blue);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
}

.demo-nav__message strong {
  color: var(--text-mid);
  font-size: .85rem;
  font-weight: 500;
}

.demo-nav__actions {
  align-items: center;
  display: inline-flex;
  gap: 10px;
  justify-self: end;
}

.demo-nav__cta {
  padding: 11px 20px;
}

/* ---- Sticky mobile CTA ----
   Hidden on desktop, where the nav CTA and the in-page buttons are enough. */
.demo-sticky-cta {
  display: none;
}

/* ---- Hero ----
   .hero reserves var(--nav-h) at the top for the fixed site nav. The demo nav sits in normal
   flow above the hero, so that reservation would show up as a gap here. */
.demo-hero {
  padding-top: 0;
}

/* ---- Booking section ----
   Placed directly after the trust logos. Everything above it is the promise, everything below
   it is evidence; this is the point where a visitor who is already convinced can act without
   scrolling the whole page first. */
.demo-book {
  background: var(--bg);
  padding: 88px 0;
}

/* The right-hand column (six reasons plus the CTA) is much taller than the portrait, so the
   aside is centred against it rather than top-aligned — top-aligning leaves an obvious well
   of empty space under Yannic's name. */
.demo-book__card {
  align-items: center;
  background: var(--blue);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  color: #fff;
  display: grid;
  gap: clamp(28px, 4vw, 56px);
  grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
  overflow: hidden;
  padding: clamp(28px, 3.6vw, 48px);
  position: relative;
}

/* Soft mint bloom behind the portrait, so the dark card does not read as a flat block. */
.demo-book__card::before {
  background: radial-gradient(circle at 0% 0%, rgba(174, 247, 183, .22), transparent 62%);
  content: '';
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.demo-book__aside,
.demo-book__main {
  position: relative;
  z-index: 1;
}

.demo-book__portrait {
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin: 0;
}

.demo-book__portrait img {
  aspect-ratio: 4 / 5;
  display: block;
  height: auto;
  object-fit: cover;
  width: 100%;
}

.demo-book__person {
  padding-top: 16px;
}

.demo-book__person-name {
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
}

.demo-book__person-role {
  color: rgba(255, 255, 255, .66);
  font-size: .85rem;
  padding-top: 2px;
}

.demo-book__label {
  color: var(--mint);
  margin-bottom: 14px;
}

.demo-book__title {
  color: #fff;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: 500;
  letter-spacing: -.025em;
  line-height: 1.2;
}

.demo-book__lead {
  color: rgba(255, 255, 255, .76);
  font-size: 1rem;
  line-height: 1.7;
  max-width: 56ch;
  padding-top: 14px;
  white-space: normal;
}

/* ---- The six reasons to book ---- */
.demo-wins {
  display: grid;
  gap: 22px 32px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 32px 0 0;
}

.demo-win {
  display: flex;
  gap: 13px;
}

.demo-win__icon {
  align-items: center;
  background: rgba(174, 247, 183, .14);
  border: 1px solid rgba(174, 247, 183, .3);
  border-radius: var(--radius);
  color: var(--mint);
  display: inline-flex;
  flex: 0 0 auto;
  height: 36px;
  justify-content: center;
  width: 36px;
}

.demo-win__icon svg {
  height: 19px;
  width: 19px;
}

.demo-win strong {
  color: #fff;
  display: block;
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.35;
}

.demo-win p {
  color: rgba(255, 255, 255, .66);
  font-size: .86rem;
  line-height: 1.55;
  padding-top: 4px;
  white-space: normal;
}

.demo-book__action {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 20px;
  padding-top: 34px;
}

.demo-book__note {
  color: rgba(255, 255, 255, .6);
  font-size: .84rem;
}

/* Mint button — the site's .btn--primary is dark blue, which disappears on this dark card. */
.demo-btn--mint {
  background: var(--mint);
  color: var(--blue);
  font-size: .95rem;
  padding: 14px 26px;
}

.demo-btn--mint:hover {
  background: #fff;
  box-shadow: 0 10px 28px rgba(174, 247, 183, .28);
  transform: translateY(-2px);
}

/* ---- Minimal footer ---- */
.demo-footer {
  background: var(--bg-dark);
  color: #fff;
  padding: 56px 0 0;
}

.demo-footer__inner {
  align-items: start;
  display: grid;
  gap: 40px;
  grid-template-columns: minmax(0, 1fr) auto;
}

/* Direct child only. The award badges further down are also <img> inside this block, and a
   descendant selector here would invert them to solid white along with the logo. */
.demo-footer__brand > img {
  height: 46px;
  width: auto;
  filter: brightness(0) invert(1);
}

.demo-footer__brand p {
  color: rgba(255, 255, 255, .68);
  font-size: .9rem;
  max-width: 34ch;
  padding-top: 14px;
  white-space: normal;
}

.demo-footer__awards {
  padding-top: 22px;
}

/* Same treatment the main footer gives its badges: full-colour artwork on the white badge
   plate, and a caption dark enough to read against it. */
.demo-footer__awards .trust-badge img {
  height: clamp(40px, 6vw, 60px);
  filter: none;
  opacity: 1;
}

.demo-footer__awards .trust-badge__caption {
  color: rgba(20, 36, 52, .55);
}

.demo-footer__actions {
  align-items: flex-end;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.demo-footer__links {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  justify-content: flex-end;
}

.demo-footer__links a,
.demo-footer__cookie {
  background: none;
  border: 0;
  color: rgba(255, 255, 255, .68);
  cursor: pointer;
  font-family: var(--font);
  font-size: .85rem;
  padding: 0;
  transition: color .18s;
}

.demo-footer__links a:hover,
.demo-footer__cookie:hover {
  color: var(--mint);
}

.demo-footer__bottom {
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, .12);
  color: rgba(255, 255, 255, .5);
  display: flex;
  flex-wrap: wrap;
  font-size: .8rem;
  gap: 12px 24px;
  justify-content: space-between;
  margin: 44px auto 0;
  max-width: var(--max);
  padding: 20px 32px;
}

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

@media (max-width: 900px) {
  .demo-book__card {
    gap: 26px;
    grid-template-columns: minmax(0, 1fr);
  }

  /* Portrait and name sit side by side once the card is a single column, so the photo does
     not eat a full screen of height before the reasons to book. */
  .demo-book__aside {
    align-items: center;
    display: flex;
    gap: 18px;
  }

  .demo-book__portrait {
    flex: 0 0 96px;
    width: 96px;
  }

  .demo-book__portrait img {
    aspect-ratio: 1 / 1;
  }

  .demo-book__person {
    padding-top: 0;
  }

  .demo-footer__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .demo-footer__actions {
    align-items: flex-start;
  }

  /* Stacked, both halves left-aligned, so the copyright and the legal links share one edge
     instead of drifting to opposite sides of a narrow screen. */
  .demo-footer__bottom {
    justify-content: flex-start;
  }

  .demo-footer__links {
    justify-content: flex-start;
  }
}

@media (max-width: 800px) {
  .demo-wins {
    gap: 20px;
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  /* The promise pill is the first thing to go: on a narrow header the logo, language switch
     and the CTA all matter more than the strapline. */
  .demo-nav__message {
    display: none;
  }

  .demo-nav__inner {
    grid-template-columns: auto auto;
    justify-content: space-between;
    min-height: 62px;
  }

  .demo-nav__logo img {
    height: 34px;
  }

  .demo-nav__cta {
    font-size: .85rem;
    padding: 10px 15px;
  }

  .demo-book {
    padding: 56px 0;
  }

  /* Bottom bar keeps the booking action in reach at any scroll position. The page gets
     matching bottom padding so the footer's last line is never trapped underneath it. */
  .demo-sticky-cta {
    align-items: center;
    background: var(--blue);
    border-top: 1px solid rgba(174, 247, 183, .25);
    bottom: 0;
    box-shadow: 0 -6px 24px rgba(20, 36, 52, .22);
    display: flex;
    flex-direction: column;
    gap: 2px;
    justify-content: center;
    left: 0;
    padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px));
    position: fixed;
    right: 0;
    text-align: center;
    z-index: 300;
  }

  .demo-sticky-cta__label {
    color: var(--mint);
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.2;
  }

  .demo-sticky-cta__note {
    color: rgba(255, 255, 255, .62);
    font-size: .74rem;
    line-height: 1.2;
  }

  .demo-footer {
    padding-bottom: 80px;
  }
}

@media (max-width: 420px) {
  .demo-nav__lang {
    display: none;
  }
}

/* The sticky bar is a fixed overlay; anyone who has asked for less motion still gets it, but
   without the page shifting under them mid-scroll. */
@media (prefers-reduced-motion: reduce) {
  .demo-btn--mint:hover {
    transform: none;
  }
}