:root {
  --blue: #1f63d0;
  --blue-dark: #184ea4;
  --blue-light: #eef3fb;
  --gold: #c9a961;
  --gold-light: #f4ede5;
  --text: #142033;
  --text-muted: #64748b;
  --bg: #f6f8fc;
  --card: #ffffff;
  --line: #d8e1ee;
  --success: #116329;
  --error: #b42318;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
}

/* ─── Container ─────────────────────────────────────── */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ─── Header Navigation ────────────────────────────── */
.header {
  background: var(--card);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.95);
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.45rem 0;
  gap: 2rem;
}

.logo-section {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
  position: relative;
}

/* A soft halo carrying the header's white down behind the overhanging part of
   the logo. The strapline is the bit that crosses onto the photograph, and it
   is the smallest, palest thing in the mark — over a lit stage or a dark
   curtain it simply disappears. This keeps the split looking deliberate
   instead of like the logo has fallen off the bottom of the banner. */
.logo-section::before {
  content: '';
  position: absolute;
  left: -18px;
  right: -18px;
  top: -10px;
  bottom: -46px;
  background: radial-gradient(ellipse at 50% 38%,
    rgba(255, 255, 255, .97) 52%, rgba(255, 255, 255, 0) 76%);
  z-index: 1;
  pointer-events: none;
  transition: opacity .18s ease;
}

/* Tucked back into the band, there is nothing to protect it from. */
.header.is-stuck .logo-section::before {
  opacity: 0;
}

.logo-image {
  width: clamp(150px, 15vw, 195px);
  height: auto;
  display: block;
  /* Hangs BELOW the header band and over the photograph, so the band itself
     can be nav-height instead of logo-height. The logo used to set the header's
     height and push the whole showcase down the page — and it appeared a second
     time inside the hero card, so the first thing anyone saw was the same badge
     twice with the room hidden behind it. */
  margin-bottom: -34px;
  position: relative;
  z-index: 2;
  transition: width .18s ease, margin-bottom .18s ease;
  /* Reads on a bright wall or a dark curtain without a box round it. */
  filter: drop-shadow(0 1px 10px rgba(255, 255, 255, .9))
          drop-shadow(0 2px 6px rgba(20, 32, 51, .18));
}

/* Once the page has moved, the overhang would sit on top of whatever scrolled
   under it, so it tucks back into the band. */
.header.is-stuck .logo-image {
  width: clamp(130px, 12vw, 160px);
  margin-bottom: 0;
  filter: none;
}

.nav-menu {
  display: flex;
  gap: 2rem;
  flex: 1;
}

.nav-link {
  color: var(--text-muted);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s;
}

.nav-link:hover {
  color: var(--blue);
}

.header-actions {
  display: flex;
  gap: 1rem;
  align-items: center;
}

@media (max-width: 768px) {
  .nav-menu {
    display: none;
  }

  .header-content {
    gap: 1rem;
  }

  .header-actions {
    gap: 0.5rem;
  }

  .logo-image {
    width: 150px;
  }
}

@media (max-width: 520px) {
  .logo-image {
    width: 118px;
  }

  /* Keep Login visible in portrait; make the action buttons
     compact so the logo + both buttons fit without overflowing. */
  .header-actions {
    gap: 0.4rem;
  }

  .header-actions .btn-primary,
  .header-actions .btn-secondary {
    padding: 0.5rem 0.7rem;
    font-size: 0.85rem;
  }
}

/* ─── Buttons ──────────────────────────────────────── */
.btn-primary,
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.65rem 1.25rem;
  border-radius: 0.35rem;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  border: 1px solid;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.btn-primary {
  background: var(--blue);
  color: white;
  border-color: var(--blue);
}

.btn-primary:hover {
  background: var(--blue-dark);
  border-color: var(--blue-dark);
  box-shadow: 0 4px 12px rgba(31, 99, 208, 0.3);
}

.btn-secondary {
  background: transparent;
  color: var(--text);
  border-color: var(--line);
}

.btn-secondary:hover {
  background: var(--blue-light);
  border-color: var(--blue);
  color: var(--blue);
}

.btn-large {
  padding: 0.85rem 2rem;
  font-size: 1rem;
}

.btn-block {
  display: block;
  width: 100%;
  margin-top: 1.5rem;
}

/* ─── Hero Section ─────────────────────────────────── */
.hero {
  position: relative;
  /* Less top padding now the header band is short — the room starts higher up
     the page, which is the whole point of having it there. */
  padding: 4.5rem 0 5.5rem;
  background-image: url("SiteImages/3DBanquet.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

/* Rotating hero backdrop: JS (marketing.js rotateHero) stacks the renders
   from SiteImages/Rotation here and crossfades them over the static
   background image above, with a slow Ken Burns push-in per image. */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.hero-bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 2.4s ease; /* FADE_MS in marketing.js */
}

.hero-bg img.is-active {
  opacity: 1;
  animation: hero-ken-burns 12s ease-out forwards;
}

@keyframes hero-ken-burns {
  from { transform: scale(1); }
  to   { transform: scale(1.07); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-bg img.is-active { animation: none; }
}

/* Semi-transparent veil over the image (keeps it crisp, not fuzzy) */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(246, 248, 252, 0.0);
  z-index: 0;
}

.hero .container {
  position: relative;
  z-index: 1;
  max-width: none;
}

.hero-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem;
  align-items: center;
  /* Narrower than it was: the card is the pitch, the room behind it is the
     proof, and the card was covering most of the proof. */
  max-width: 440px;
  margin-left: auto;
}

.hero-text {
  background: rgba(255, 255, 255, 0.93);
  padding: 1.35rem 1.6rem 1.6rem;
  border-radius: 1rem;
  box-shadow: 0 20px 50px rgba(20, 32, 51, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.6);
}

.hero-text h1 {
  font-size: 1.95rem;
  line-height: 1.2;
  margin: 0 0 0.75rem 0;
  color: var(--text);
}

.hero-subtitle {
  font-size: 1rem;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0 0 1.1rem 0;
}

.hero-buttons {
  display: flex;
  gap: 1rem;
  margin: 1.25rem 0 0;
  flex-wrap: wrap;
}

.hero-note {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin: 1rem 0 0 0;
  padding: 0;
  list-style: none;
}

.hero-note li {
  margin-top: 0.4rem;
}

.hero-visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

.placeholder-demo {
  width: 100%;
  max-width: 400px;
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, var(--blue-light), white);
  border-radius: 0.75rem;
  padding: 1.5rem;
  box-shadow: 0 20px 40px rgba(31, 99, 208, 0.15);
  border: 1px solid var(--line);
}

.placeholder-demo svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.05));
}

.hero-image {
  width: 100%;
  max-width: 520px;
  border-radius: 0.9rem;
  overflow: hidden;
  box-shadow: 0 24px 50px rgba(20, 32, 51, 0.25);
  border: 1px solid var(--line);
}

.hero-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

@media (max-width: 768px) {
  /* On a phone the card was the whole screen: the room behind it never got
     seen at all, which is the one thing the page is trying to show. Shrinking
     the card was not enough — it still covered four fifths of the photo — so
     on mobile the two stop sharing pixels. The render gets a band of its own
     across the top and the copy sits underneath it, both fully visible. */
  .hero {
    --hero-band: clamp(190px, 52vw, 260px);
    padding: calc(var(--hero-band) + 1.5rem) 0 3rem;
    background-image: none;
    background-color: var(--bg);
  }

  /* Instant first paint, and the fallback if the rotation script never runs. */
  .hero::before {
    inset: 0 0 auto 0;
    height: var(--hero-band);
    background: url("SiteImages/3DBanquet.jpg") center / cover no-repeat;
  }

  .hero-bg {
    inset: 0 0 auto 0;
    height: var(--hero-band);
  }

  .hero-content {
    grid-template-columns: 1fr;
    gap: 2rem;
    max-width: none;
    margin-left: 0;
  }

  /* The logo tucks back into the band so it is not hanging over the photo. */
  .header .logo-image {
    width: clamp(132px, 40vw, 165px);
    margin-bottom: 0;
    filter: none;
  }

  /* Nothing behind the copy now, so the card furniture is just noise. */
  .hero-text {
    background: transparent;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .hero-text h1 {
    font-size: 1.35rem;
    line-height: 1.25;
    margin-bottom: 0.6rem;
  }

  .hero-subtitle {
    font-size: 0.92rem;
    line-height: 1.5;
    margin-bottom: 0.9rem;
  }

  .hero-buttons {
    flex-direction: column;
    margin: 1.25rem 0 0;
  }

  .hero-note {
    font-size: 0.85rem;
    margin-top: 0.8rem;
  }

  .hero-visual {
    display: none;
  }
}

/* Short desktop/laptop viewports: shrink the hero's vertical padding and the
   card's internals so the CTA stays above the fold instead of being cut off. */
@media (min-width: 769px) and (max-height: 900px) {
  .hero {
    padding: clamp(2rem, 6vh, 5rem) 0;
  }

  .hero-text {
    padding: 1.15rem 1.5rem 1.35rem;
  }

  .hero-text h1 {
    font-size: 1.85rem;
    margin-bottom: 0.75rem;
  }

  .hero-subtitle {
    font-size: 1rem;
    margin-bottom: 1rem;
  }

  .hero-buttons {
    margin: 1.25rem 0 0;
  }

  .hero-note {
    font-size: 0.9rem;
    margin-top: 1rem;
  }
}

/* ─── Section Headers ──────────────────────────────── */
.section-header {
  text-align: center;
  margin-bottom: 3.5rem;
}

.section-header h2 {
  font-size: 2.25rem;
  line-height: 1.2;
  margin: 0 0 1.5rem 0;
  position: relative;
  display: inline-block;
  padding-bottom: 0.75rem;
}

.section-header h2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: var(--gold);
  border-radius: 2px;
}

.section-header p {
  color: var(--text-muted);
  font-size: 1.1rem;
  margin: 1rem 0 0 0;
}

/* Gallery Section */
.gallery {
  padding: 5rem 0;
  background: white;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2rem;
  margin-top: 3rem;
}

@media (max-width: 1024px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .gallery-grid {
    grid-template-columns: 1fr;
  }
}

.gallery-item {
  position: relative;
  border-radius: 1rem;
  overflow: hidden;
  height: 350px;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.gallery-item:hover img {
  transform: scale(1.05);
}

.gallery-overlay {
  display: none;
}

.gallery-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 2rem;
  color: white;
  z-index: 2;
  background: linear-gradient(
    to top,
    rgba(20, 32, 51, 0.7) 0%,
    rgba(20, 32, 51, 0.4) 40%,
    transparent 100%
  );
}

.gallery-content h3 {
  margin: 0 0 0.75rem 0;
  font-size: 1.5rem;
  font-weight: 700;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.gallery-content p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  opacity: 0.95;
}

.gallery-cta {
  text-align: center;
  margin-top: 3rem;
  padding: 2rem;
  background: var(--blue-light);
  border-radius: 0.75rem;
  border: 1px solid var(--line);
}

.gallery-cta p {
  color: var(--text-muted);
  font-size: 1rem;
  margin: 0 0 1.5rem 0;
}

@media (max-width: 768px) {
  .gallery-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .gallery-item {
    height: 280px;
  }

  .gallery-content {
    padding: 1.5rem;
  }

  .gallery-content h3 {
    font-size: 1.25rem;
  }
}

/* ─── Comparison Section ──────────────────────────── */
.comparison {
  padding: 5rem 0;
  background: var(--bg);
}

.comparison-grid {
  display: grid;
  gap: 4rem;
  margin-top: 3rem;
}

.comparison-pair {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 2rem;
  align-items: center;
  background: white;
  padding: 2rem;
  border-radius: 1rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.comparison-item {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.comparison-label {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--blue);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.comparison-item img {
  width: 100%;
  border-radius: 0.5rem;
  display: block;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Zoomable images (click to enlarge) */
.zoomable {
  cursor: zoom-in;
}

/* The tiles crop to 350px and carry a gradient over the lower half, so the
   modelling detail people are being asked to judge is exactly what they cannot
   see. Say the enlargement is there — a cursor change alone is invisible on
   touch, which is most of this traffic. */
.zoom-badge {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  background: rgba(10, 16, 28, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  backdrop-filter: blur(4px);
  pointer-events: none;
  opacity: 0.92;
  transition: opacity 0.2s ease, background 0.2s ease;
}

.zoom-badge::before {
  content: '⤢';
  font-size: 0.95rem;
  line-height: 1;
}

.zoomable:hover .zoom-badge,
.zoomable:focus-visible .zoom-badge {
  opacity: 1;
  background: rgba(31, 99, 208, 0.9);
}

.zoomable:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}

/* The caption block sits above the picture and swallowed every click, which is
   why the lightbox never opened from the tile. */
.gallery-content {
  pointer-events: none;
}

.comparison-item img.zoomable {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.comparison-item img.zoomable:hover {
  transform: scale(1.03);
  box-shadow: 0 12px 28px rgba(20, 32, 51, 0.2);
}

/* Lightbox overlay */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(10, 16, 28, 0.9);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 2rem;
  cursor: zoom-out;
}

.lightbox.open {
  display: flex;
}

.lightbox-figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  max-width: 95vw;
}

.lightbox img {
  max-width: 95vw;
  max-height: 82vh;
  border-radius: 0.5rem;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}

.lightbox figcaption {
  color: rgba(255, 255, 255, 0.92);
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  max-width: 46rem;
}

.lightbox-close {
  position: absolute;
  top: 1.25rem;
  right: 1.75rem;
  background: none;
  border: none;
  color: white;
  font-size: 2.5rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.8;
  transition: opacity 0.2s;
}

.lightbox-close:hover {
  opacity: 1;
}

.comparison-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue);
  min-width: 60px;
}

.comparison-arrow svg {
  width: 40px;
  height: 40px;
}

@media (max-width: 768px) {
  .comparison-pair {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .comparison-arrow {
    transform: rotate(90deg);
    min-height: 60px;
  }
}

/* ─── App Showcase Section ────────────────────────── */
.app-showcase {
  padding: 5rem 0;
  background: white;
}

.showcase-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2rem;
  margin-top: 3rem;
}

.showcase-card {
  background: var(--bg);
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid var(--line);
  transition: all 0.3s;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.showcase-card:hover {
  border-color: var(--blue);
  box-shadow: 0 15px 40px rgba(31, 99, 208, 0.12);
  transform: translateY(-4px);
}

.showcase-card img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  display: block;
}

.showcase-content {
  padding: 2rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.showcase-content h3 {
  margin: 0 0 0.75rem 0;
  font-size: 1.1rem;
  color: var(--text);
}

.showcase-content p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.6;
  flex: 1;
}

/* ─── Features Section ─────────────────────────────── */
.features {
  padding: 5rem 0;
  background: var(--bg);
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

.feature-card {
  background: var(--card);
  padding: 2rem;
  border-radius: 0.75rem;
  border: 1px solid var(--line);
  transition: all 0.3s;
}

.feature-card:hover {
  border-color: var(--blue);
  box-shadow: 0 10px 30px rgba(31, 99, 208, 0.1);
  transform: translateY(-2px);
}

.feature-icon {
  width: 3rem;
  height: 3rem;
  background: var(--blue-light);
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue);
  margin-bottom: 1rem;
  flex-shrink: 0;
}

.feature-icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

.feature-card h3 {
  margin: 0 0 0.75rem 0;
  font-size: 1.1rem;
}

.feature-card p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* ─── Pricing Section ──────────────────────────────── */
.pricing {
  padding: 5rem 0;
  background: white;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.75rem;
  margin-top: 3rem;
  max-width: 1140px;
  margin-left: auto;
  margin-right: auto;
  align-items: start;
}

.pricing-grid-five {
  max-width: 1720px;
}

.pricing-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  padding: 2.5rem 2rem;
  position: relative;
  transition: all 0.3s;
}

.pricing-card:hover {
  border-color: var(--blue);
  box-shadow: 0 20px 40px rgba(31, 99, 208, 0.1);
  transform: translateY(-4px);
}

.pricing-featured {
  border-color: var(--blue);
  box-shadow: 0 20px 40px rgba(31, 99, 208, 0.1);
}

.pricing-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--blue);
  color: white;
  padding: 0.4rem 1rem;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 700;
}

.pricing-header h3 {
  margin: 0 0 0.35rem 0;
  font-size: 1.35rem;
}

.pricing-desc {
  color: var(--text-muted);
  margin: 0;
  font-size: 0.95rem;
}

.pricing-price {
  margin: 1.5rem 0;
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
}

.price-currency {
  font-size: 1.2rem;
  color: var(--text-muted);
}

.price-amount {
  font-size: 2.5rem;
  font-weight: 700;
}

.price-period {
  color: var(--text-muted);
  font-size: 0.95rem;
}

.price-custom {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--blue);
}

.pricing-trial {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin: 1rem 0;
}

.pricing-vat-note {
  margin-top: 1.5rem;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.8rem;
}

/* "Everything in Standard, plus:" lead-in — makes the tier DELTA the story
   instead of a near-identical checklist on every card. */
.pricing-includes {
  font-weight: 700;
  color: var(--text);
  margin: 1.25rem 0 -0.5rem;
  font-size: 0.95rem;
}

.pricing-compare {
  color: var(--text-muted);
  font-weight: 400;
  font-size: 0.85em;
}

.pricing-features {
  list-style: none;
  margin: 1.5rem 0;
  padding: 0;
}

.pricing-features li {
  color: var(--text-muted);
  padding: 0.6rem 0;
  font-size: 0.95rem;
}

@media (max-width: 768px) {
  .pricing-grid {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 769px) and (max-width: 1180px) {
  .pricing-grid-five {
    grid-template-columns: repeat(2, minmax(280px, 1fr));
  }
}

@media (min-width: 1181px) {
  .pricing .container {
    max-width: 1760px;
    padding-left: 24px;
    padding-right: 24px;
  }

  .pricing-grid-five {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1rem;
  }

  .pricing-grid-five .pricing-card {
    padding: 2rem 1.25rem;
  }

  .pricing-grid-five .pricing-features li {
    font-size: 0.88rem;
  }
}

/* ─── Trial CTA Section ────────────────────────────── */
.trial-cta {
  padding: 4rem 0;
  background: linear-gradient(135deg, var(--blue), var(--blue-dark));
  color: white;
}

.trial-content {
  text-align: center;
}

.trial-content h2 {
  font-size: 2rem;
  margin: 0 0 1rem 0;
}

.trial-content p {
  font-size: 1.1rem;
  margin: 0 0 2rem 0;
  opacity: 0.95;
}

/* ─── FAQ Section ──────────────────────────────────── */
.faq {
  padding: 5rem 0;
  background: white;
}

.faq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2rem;
  margin-top: 3rem;
}

.faq-item {
  padding: 1.5rem;
  background: var(--bg);
  border-radius: 0.75rem;
  border: 1px solid var(--line);
}

.faq-item h3 {
  margin: 0 0 0.75rem 0;
  font-size: 1rem;
  font-weight: 600;
}

.faq-item p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* ─── Trial Signup Section ─────────────────────────── */
.trial-signup {
  padding: 4rem 0;
  background: var(--bg);
}

.signup-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  padding: 3rem;
  max-width: 500px;
  margin: 0 auto;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.signup-header {
  text-align: center;
  margin-bottom: 2rem;
}

.signup-header h2 {
  margin: 0 0 0.5rem 0;
  font-size: 1.75rem;
}

.signup-header p {
  margin: 0;
  color: var(--text-muted);
  font-size: 1rem;
}

.signup-form {
  display: grid;
  gap: 1.25rem;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

label {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

label span {
  font-weight: 600;
  font-size: 0.95rem;
}

/* Keep this list in step with the form fields. A type missing here falls back
   to the browser default and looks visibly wrong next to its neighbours —
   which is exactly what happened to the tel field on the trial form. */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"] {
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 0.35rem;
  font-size: 0.95rem;
  font-family: inherit;
  transition: all 0.2s;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(31, 99, 208, 0.1);
}

.field-row {
  display: flex;
  gap: 0;
}

.field-row input {
  border-radius: 0.35rem 0 0 0.35rem;
  flex: 1;
}

.toggle {
  border: 1px solid var(--line);
  border-left: 0;
  border-radius: 0 0.35rem 0.35rem 0;
  background: #f8fafc;
  padding: 0 0.85rem;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s;
}

.toggle:hover {
  background: var(--blue-light);
  color: var(--blue);
}

.checkbox-label {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0.6rem;
  margin: 0.5rem 0;
}

.checkbox-label input[type="checkbox"] {
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.2rem;
  cursor: pointer;
  flex-shrink: 0;
}

.form-note {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.9rem;
  margin: 0;
}

.form-note a {
  color: var(--blue);
  text-decoration: none;
  font-weight: 600;
}

.form-note a:hover {
  text-decoration: underline;
}

.form-status {
  min-height: 1.25rem;
  padding: 0.75rem;
  border-radius: 0.35rem;
  font-weight: 500;
  text-align: center;
}

.form-status.error {
  background: #ffe6e3;
  color: var(--error);
}

.form-status.success {
  background: #dffcf0;
  color: var(--success);
}

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

  .form-grid {
    grid-template-columns: 1fr;
  }
}

/* ─── Footer ──────────────────────────────────────── */
.footer {
  background: var(--text);
  color: white;
  padding: 4rem 0 1rem;
}

.footer-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-section h4 {
  margin: 0 0 1rem 0;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.footer-section ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-section ul li {
  margin: 0.5rem 0;
}

.footer-section a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: color 0.2s;
}

.footer-section a:hover {
  color: white;
}

.footer-logo-image {
  width: min(100%, 280px);
  height: auto;
  display: block;
  margin: -1rem 0 0.25rem;
  padding: 0.65rem;
  border-radius: 0.5rem;
  background: #fff;
}

.footer-section p {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.9rem;
  line-height: 1.6;
}

.footer-bottom {
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.9rem;
  padding: 1rem 0;
}

/* ─── Responsive ──────────────────────────────────── */
@media (max-width: 640px) {
  .section-header h2 {
    font-size: 1.75rem;
  }

  .features {
    padding: 3rem 0;
  }

  .pricing {
    padding: 3rem 0;
  }

  .faq {
    padding: 3rem 0;
  }

  .trial-signup {
    padding: 2rem 0;
  }
}

/* ── Spotlight: Optimise & Check Fit ──────────────────────────────────────── */
.spotlight {
  padding: 90px 0;
  background: linear-gradient(180deg, var(--blue-light), #fff);
  border-top: 1px solid var(--line);
}
.spotlight-eyebrow {
  display: inline-block;
  margin-bottom: 12px;
  padding: 4px 14px;
  border-radius: 20px;
  background: var(--gold-light);
  color: #8a6d2f;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.spotlight-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 44px;
}
.spotlight-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 10px 30px rgba(31, 99, 208, .08);
}
.spotlight-card h3 {
  margin: 0 0 12px;
  font-size: 24px;
  color: var(--blue-dark);
}
.spotlight-card > p {
  color: var(--text-muted);
  margin: 0 0 18px;
  line-height: 1.6;
}
.spotlight-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.spotlight-list li {
  position: relative;
  padding: 7px 0 7px 30px;
  border-top: 1px solid var(--line);
  font-size: 15px;
  line-height: 1.5;
}
.spotlight-list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 13px;
  width: 14px;
  height: 8px;
  border-left: 2px solid var(--blue);
  border-bottom: 2px solid var(--blue);
  transform: rotate(-45deg);
}
@media (max-width: 820px) {
  .spotlight-grid { grid-template-columns: 1fr; }
  .spotlight { padding: 60px 0; }
}
.live-showcase { position:relative; padding:42px 0 80px; background:#0d263b; overflow:hidden; }
.live-showcase::before { content:""; position:absolute; width:520px; height:520px; right:-180px;
  top:-260px; border-radius:50%; background:radial-gradient(circle,rgba(25,167,206,.28),transparent 68%); }
.showcase-stage { position:relative; display:grid; grid-template-columns:minmax(240px,.7fr) minmax(0,1.5fr);
  min-height:520px; border:1px solid rgba(255,255,255,.12); border-radius:26px; overflow:hidden;
  background:#102f48; box-shadow:0 28px 80px rgba(0,0,0,.32); }
.showcase-copy { display:flex; flex-direction:column; justify-content:center; padding:48px; color:#fff; }
.showcase-kicker { color:#75d9ef; text-transform:uppercase; letter-spacing:.16em; font-size:.72rem; font-weight:800; }
.showcase-copy h2 { margin:12px 0; color:#fff; font-size:clamp(2rem,4vw,3.4rem); line-height:1; }
.showcase-copy p { color:#b8cfdd; line-height:1.6; }
.showcase-now { margin-top:34px; padding-top:20px; border-top:1px solid rgba(255,255,255,.15); }
.showcase-now span { display:block; color:#7da1b8; font-size:.72rem; text-transform:uppercase; letter-spacing:.12em; }
.showcase-now strong { display:block; margin-top:6px; font-size:1.15rem; }
.showcase-dots { display:flex; gap:7px; margin-top:20px; }
.showcase-dots button { width:24px; height:4px; padding:0; border:0; border-radius:999px;
  background:rgba(255,255,255,.25); }
.showcase-dots button.active { background:#5ed1ea; }
.showcase-screen { position:relative; min-height:520px; background:#071a29; }
.showcase-frames { position:absolute; inset:0; }
.showcase-frame { position:absolute; inset:0; width:100%; height:100%; min-height:520px; border:0;
  display:block; pointer-events:none; opacity:0; transition:opacity .8s ease; }
/* pointer-events must come back on the visible frame or the stacked (invisible)
   iframes above it swallow every click — the tour's Party/Guests buttons were
   visible but dead. */
.showcase-frame.active { opacity:1; pointer-events:auto; }
/* Bottom-LEFT and click-transparent: the viewer iframe puts its Meal/Party +
   Guests buttons bottom-right, and this pill sat exactly on top of them —
   an overlay outside the iframe swallows their clicks regardless of z-index. */
.showcase-screen-label { position:absolute; left:18px; bottom:16px; padding:7px 11px; border-radius:999px;
  color:#d8edf5; background:rgba(6,24,38,.72); backdrop-filter:blur(8px); font-size:.72rem;
  pointer-events:none; }
.showcase-play[hidden] { display:none; }
.showcase-play { position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:12px; width:100%; border:0; cursor:pointer; color:#fff;
  background:radial-gradient(circle at 50% 45%, rgba(25,167,206,.22), rgba(7,26,41,.92) 70%); }
.showcase-play-icon { display:flex; align-items:center; justify-content:center; width:72px; height:72px;
  border-radius:50%; background:rgba(94,209,234,.18); border:2px solid rgba(94,209,234,.65); color:#5ed1ea;
  transition:transform .2s ease, background .2s ease; }
.showcase-play-icon svg { width:32px; height:32px; margin-left:4px; }
.showcase-play:hover:not(:disabled) .showcase-play-icon { transform:scale(1.08); background:rgba(94,209,234,.32); }
.showcase-play-text { font-size:1.2rem; font-weight:700; }
.showcase-play small { color:#7da1b8; font-size:.78rem; }
.showcase-play.loading { cursor:progress; }
.showcase-play.loading .showcase-play-icon { animation:showcase-pulse 1.2s ease-in-out infinite; }
@keyframes showcase-pulse { 0%,100% { opacity:1; } 50% { opacity:.45; } }
.showcase-stop[hidden] { display:none; }
.showcase-stop { position:absolute; top:14px; right:14px; z-index:3; padding:8px 14px; border-radius:999px;
  border:1px solid rgba(255,255,255,.35); background:rgba(6,24,38,.72); color:#d8edf5; font-size:.8rem;
  cursor:pointer; backdrop-filter:blur(8px); }
.showcase-stop:hover { background:rgba(6,24,38,.92); border-color:rgba(255,255,255,.6); }
@media (max-width:820px) {
  .showcase-stage { grid-template-columns:1fr; }
  .showcase-copy { padding:32px; }
  .showcase-screen, .showcase-frame { min-height:420px; }
}

/* ── Little-details ticker ─────────────────────────────────────────────────
   Two counter-scrolling rows of feature pills on a dark band. Pure CSS: each
   track holds the pill set twice and slides -50%, so the loop is seamless.
   Hover pauses a row so pills can actually be read; reduced-motion swaps the
   animation for a static centred wrap. */
.detail-ticker {
  background: linear-gradient(180deg, #0c1322 0%, #131b30 100%);
  padding: 72px 0 56px;
  overflow: hidden;
}
.detail-ticker-header h2 { color: #ffffff; }
.detail-ticker-header p { color: rgba(226,233,244,0.66); }
.ticker-rows { display: flex; flex-direction: column; gap: 14px; margin-top: 12px; }
.ticker-row {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.ticker-track {
  display: flex;
  width: max-content;
  animation: ticker-scroll 70s linear infinite;
  padding: 4px 0;
}
.ticker-set { display: flex; flex: 0 0 auto; }
.ticker-reverse .ticker-track { animation-direction: reverse; animation-duration: 84s; }
.ticker-row:hover .ticker-track { animation-play-state: paused; }
.ticker-pill {
  flex: 0 0 auto;
  white-space: nowrap;
  margin-right: 12px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid rgba(201, 169, 97, 0.38);
  background: rgba(255, 255, 255, 0.055);
  color: #e8edf7;
  font-size: 0.95rem;
  line-height: 1;
}
.ticker-cta { text-align: center; margin-top: 36px; }
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; width: auto; flex-wrap: wrap; justify-content: center; gap: 10px; }
  .ticker-set { flex-wrap: wrap; justify-content: center; gap: 10px; }
  .ticker-set[aria-hidden="true"] { display: none; }
  .ticker-row { -webkit-mask-image: none; mask-image: none; }
  .ticker-pill { white-space: normal; }
}
@media (max-width: 720px) {
  .detail-ticker { padding: 52px 0 44px; }
  .ticker-pill { font-size: 0.85rem; padding: 8px 14px; }
}

/* == AI Visualisation Studio teaser (homepage) ============================ */
.ai-teaser { padding: 2.6rem 0 0.8rem; }
.ai-teaser-card { display: grid; grid-template-columns: minmax(0, 1.1fr) 1fr; gap: 2rem; align-items: center;
  background: var(--card); border: 1px solid var(--gold); border-radius: 16px; padding: 1.4rem;
  text-decoration: none; color: inherit; box-shadow: 0 16px 40px rgba(20, 32, 51, 0.10); transition: box-shadow 0.2s; }
.ai-teaser-card:hover { box-shadow: 0 20px 50px rgba(20, 32, 51, 0.16); }
.ai-teaser-card img { width: 100%; border-radius: 10px; display: block; }
.ai-teaser-badge { display: inline-block; background: var(--gold-light); color: #7a5a1e; border: 1px solid var(--gold);
  border-radius: 999px; padding: 0.3rem 1rem; font-weight: 700; letter-spacing: 0.04em; font-size: 0.8rem; }
.ai-teaser-copy h2 { margin: 0.7rem 0 0.5rem; font-size: 1.7rem; color: var(--text); }
.ai-teaser-copy p { color: var(--text-muted); margin: 0 0 0.9rem; line-height: 1.6; }
.ai-teaser-link { color: var(--blue); font-weight: 700; }
@media (max-width: 760px) { .ai-teaser-card { grid-template-columns: 1fr; gap: 1rem; } }

/* ── Website widget teaser ──────────────────────────────────────────────────
   Taking enquiries straight off the venue's own website is the strongest thing
   this product does for a venue, and it was previously reachable only from a
   footer link. Deliberately blue rather than gold so it does not compete with
   the AI Studio card above it. */
.ww-teaser { padding: 1.4rem 0 0.6rem; }
.ww-teaser-card { display: grid; grid-template-columns: minmax(0, 1fr) 1fr; gap: 2rem; align-items: center;
  background: linear-gradient(135deg, var(--blue-light), var(--card)); border: 1px solid var(--blue);
  border-radius: 16px; padding: 1.6rem; text-decoration: none; color: inherit;
  box-shadow: 0 16px 40px rgba(20, 32, 51, 0.10); transition: box-shadow 0.2s; }
.ww-teaser-card:hover { box-shadow: 0 20px 50px rgba(20, 32, 51, 0.16); }
.ww-teaser-badge { display: inline-block; background: var(--blue); color: #fff;
  border-radius: 999px; padding: 0.3rem 1rem; font-weight: 700; letter-spacing: 0.04em; font-size: 0.8rem; }
.ww-teaser-copy h2 { margin: 0.7rem 0 0.5rem; font-size: 1.7rem; color: var(--text); }
.ww-teaser-copy p { color: var(--text-muted); margin: 0 0 0.9rem; line-height: 1.6; }
.ww-teaser-link { color: var(--blue); font-weight: 700; }
.ww-teaser-points { margin: 0 0 1rem; padding: 0; list-style: none; display: grid; gap: 0.5rem; }
.ww-teaser-points li { color: var(--text); font-weight: 600; padding-left: 1.6rem; position: relative; }
.ww-teaser-points li::before { content: "✓"; position: absolute; left: 0; color: var(--blue); font-weight: 800; }
.ww-teaser-visual { background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 1.1rem; box-shadow: 0 10px 26px rgba(20, 32, 51, 0.08); }
.ww-teaser-visual .ww-tv-title { font-weight: 700; margin: 0 0 0.7rem; color: var(--text); }
.ww-teaser-visual .ww-tv-row { display: flex; justify-content: space-between; gap: 0.6rem;
  padding: 0.45rem 0; border-bottom: 1px solid var(--line); color: var(--text-muted); font-size: 0.92rem; }
.ww-teaser-visual .ww-tv-row:last-of-type { border-bottom: 0; }
.ww-teaser-visual .ww-tv-cta { display: block; margin-top: 0.9rem; padding: 0.6rem 1rem; border-radius: 8px;
  background: var(--blue); color: #fff; text-align: center; font-weight: 700; font-size: 0.95rem; }
@media (max-width: 760px) { .ww-teaser-card { grid-template-columns: 1fr; gap: 1.1rem; } }

/* ── Mobile navigation ──────────────────────────────────────────────────────
   The nav is hidden below 768px (see .nav-menu above); this is what replaces
   it. Button and drawer are injected by nav-mobile.js so the seven pages that
   share this header need no markup of their own. Hidden above the breakpoint,
   so desktop is untouched. */
.mobile-nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;             /* 44px: the minimum comfortable touch target */
  height: 44px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  cursor: pointer;
}

.mobile-nav-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  border-radius: 2px;
  background: var(--text);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Burger folds into a cross while the drawer is open. */
.mobile-nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mobile-nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.mobile-nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1400;
  background: rgba(20, 32, 51, 0.45);
}

.mobile-nav-drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1401;
  width: min(310px, 84vw);
  height: 100%;
  overflow-y: auto;
  padding: 76px 22px 28px;   /* clears the header the button sits in */
  background: var(--card);
  box-shadow: -12px 0 34px rgba(20, 32, 51, 0.18);
}

.mobile-nav-drawer ul {
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}

.mobile-nav-drawer li + li { border-top: 1px solid var(--line); }

.mobile-nav-drawer a {
  display: block;
  padding: 14px 2px;
  color: var(--text);
  font-size: 1.05rem;
  font-weight: 600;
  text-decoration: none;
}

.mobile-nav-drawer a:hover,
.mobile-nav-drawer a:focus-visible { color: var(--blue); }

.mobile-nav-cta {
  display: grid;
  gap: 10px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.mobile-nav-cta a {
  padding: 12px 16px;
  text-align: center;
}

@media (max-width: 768px) {
  .mobile-nav-toggle { display: flex; }
  /* The burger is a fourth item in a header row that already carried the logo,
     Login and Start Free Trial, and at phone widths the four did not fit: the
     button was squeezed to half size and pushed 22px off the right-hand edge,
     which both scrolled every page sideways and put the only way into the menu
     partly out of reach. Login moves out of the row — the drawer repeats it at
     its foot — and the trial button stays, because it is the one thing in the
     header worth a tap. */
  .header .header-actions .btn-secondary { display: none; }
  .header .header-content { gap: 10px; }
  .header .logo-image { max-width: 140px; }
  .mobile-nav-toggle { flex: 0 0 auto; }
}

/* Above the breakpoint the drawer must never appear, even if a stale
   `hidden`-toggle left it open when the window was resized. */
@media (min-width: 769px) {
  .mobile-nav-drawer,
  .mobile-nav-backdrop { display: none !important; }
}