/* === Fullscreen Hero Wrapper === */
.landing-layout {
  position: relative;
  height: 80vh;
  width: 100%;
  background:
    radial-gradient(circle at center, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 70%, var(--bg-dark) 80%),
    url("/static/media/app_index_background.webp") center center / cover no-repeat;
  background-blend-mode: overlay;
  overflow: hidden;
  margin: 0;
  padding: 0;
  z-index: 0;
  translate: 0rem; /* Adjust vertical position to center hero content */
}

/* === Darkness Overlay === */
.landing-layout::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.5); /* Adjustable darkness */
  z-index: 0;
  pointer-events: none;
}

/* === Centered Hero Text Block === */
.hero-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  text-align: center;
  color: var(--text-light);
  padding: 0 1rem;
  max-width: 90vw;
}

/* Optional: push future scroll content below the full screen hero */
.scroll-reveal-section {
  position: relative;
  z-index: 2;
  background-color: var(--bg-dark);
  padding: 4rem 2rem;
  color: var(--text-light);
}


/* === Ensure All Hero Content Renders Above Overlay === */
.landing-layout > * {
  position: relative;
  z-index: 1;
}

/* === Hero Text Styling === */
.landing-title {
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 1rem;
  color: var(--text-light);
}

.landing-subtitle {
  font-size: 1.25rem;
  color: var(--text-muted);
  max-width: 600px;
  margin: 0 auto 2rem;
}


/* === Mobile Adjustments === */
@media (max-width: 768px) {
  .landing-title {
    font-size: 2rem;
  }

  .landing-subtitle {
    font-size: 1.1rem;
    padding: 0 1rem;
  }

  .cta-button {
    padding: 0.75rem 1.5rem;
    font-size: 0.95rem;
  }
}

/* === Landing Panel (Below Hero) === */
.landing-panel.centered {
  text-align: center;
  margin: 0 auto;
  padding: 0rem 1.5rem;
  background-color: transparent; /* Ensure no accidental override */
}

/* === Panel Content === */
.panel-content{
  padding-bottom: 0rem;
}

.panel-content h2.landing-section-heading {
  font-family: 'Cinzel', serif;
  font-size: 1.8rem;
  margin-top: 0rem;
  margin-bottom: 0.75rem;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.panel-content p {
  font-family: 'Lora', serif;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--text-light);
  margin-bottom: 1.5rem;
}

/* === Divider Styling === */
.landing-divider {
  border: none;
  border-top: 1px solid var(--text-light);
  opacity: 0.25;
  margin: 4rem auto;
  width: 60%;
}

.landing-section-container {
  display: flex;
  flex-direction: column;
  align-items: center;   /* centers child blocks horizontally */
}


/* Make only this section wider */
.landing-section-container--wide { 
  max-width: 1200px;        /* was likely ~720–960px */
  margin-inline: auto;
}

.art-credit{
  position: fixed;
  right: max(8px, env(safe-area-inset-right));
  bottom: max(8px, env(safe-area-inset-bottom));
  z-index: 1000;

  font-family: 'Lora', serif;
  font-size: 11px;              /* smaller on phones */
  line-height: 1.35;

  color: var(--text-footer);
  text-decoration: none;
  background: rgba(0,0,0,.35);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);

  padding: 6px 10px;            /* tighter on phones */
  border-radius: 9999px;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
  touch-action: manipulation;
}

/* small tablets and up */
@media (min-width: 480px){
  .art-credit{
    right: max(12px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
    font-size: 12px;
    padding: 8px 12px;
  }
}

/* tablets/desktops */
@media (min-width: 768px){
  .art-credit{
    font-size: 14px;
    padding: 9px 14px;
  }
}

.art-credit:hover,
.art-credit:focus-visible{
  color: #fff;
  background: rgba(0,0,0,.5);
}


/* Grid layout — centered */
.portrait-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(3, minmax(300px, 1fr));
  margin-top: 3rem;
  padding-bottom: 2rem;
}

@media (max-width: 1080px) {
  .portrait-grid { grid-template-columns: repeat(2, minmax(320px, 1fr)); }
}
@media (max-width: 720px) {
  .portrait-grid { grid-template-columns: 1fr; }
}


/* Card shell */
.portrait-card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  background: #0e0e10;
  justify-content: center;
}

.portrait-media {
  aspect-ratio: 3 / 4;
  width: 100%;
  max-width: 300px;
  margin-inline: auto;
  background-size: contain;     /* <- was cover */
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 20px;
  background-color: #0e0e10;    /* matches card bg */
}

/* Centered control */
.portrait-ctrl {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);  /* perfect center */
  display: inline-grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 999px;
  border: none;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(4px);
  cursor: pointer;
  transition: background 160ms ease, transform 120ms ease, opacity 160ms ease;
  z-index: 2;                          /* stay above image/reflection */
}

.portrait-media { position: relative; /* key */ }

/* hover/active feel */
.portrait-ctrl:hover { background: rgba(0,0,0,0.6); transform: translate(-50%, -50%) scale(1.02); }
.portrait-ctrl:active { transform: translate(-50%, -50%) scale(0.98); }

/* Icons */
.portrait-ctrl svg {
  width: 40px; height: 40px; fill: #fff; opacity: 0.95;
}
.portrait-ctrl .icon-pause { display: none; }

/* When “playing”, swap icons (you can toggle this class via JS later) */
.portrait-card.is-playing .icon-play { display: none; }
.portrait-card.is-playing .icon-pause { display: block; }

/* Small visual polish */
.landing-illustration { margin-top: 1rem; }
.landing-illustration img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 20px;
  box-shadow: 0 12px 36px rgba(0,0,0,0.2);
  object-fit: contain;
}

/* Force true viewport-centering regardless of parent layout */
.landing-illustration--breakout {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: min(100vw - 32px, 1400px);  /* 16px gutters */
  margin-top: 1rem;                  /* no left/right margins needed */
  display: block;
  align-self: center;                /* if parent is flex */
  justify-self: center;              /* if parent is grid */
}

.landing-illustration--breakout img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 20px;
  box-shadow: 0 12px 36px rgba(0,0,0,0.2);
}

/* Full-bleed, truly centered to viewport */
.breakout {
  position: relative;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;                 /* spans the viewport */
}

/* Center the figure inside and cap max width */
.breakout .landing-illustration {
  margin: 1rem auto 0;          /* centers inside breakout */
  width: min(100vw - 32px, 1080px);
}

/* Image polish (keep your radius/shadow) */
.breakout .landing-illustration img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 20px;
  box-shadow: 0 12px 36px rgba(0,0,0,0.2);
}














.landing-layout {
  position: relative; /* so the cue positions within the hero */
}

/* Scroll cue */
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  text-decoration: none;
  font-family: inherit;
  font-size: 0.85rem;
  line-height: 1;
  color: var(--text-on-accent, #fff);
  opacity: 0.9;
  border-radius: 999px;
  backdrop-filter: blur(2px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.scroll-cue:hover,
.scroll-cue:focus-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(-2px);
  outline: none;
}

.scroll-cue-text {
  letter-spacing: 0.02em;
  opacity: 0.9;
}

/* Chevron bounce */
.chevron {
  animation: scroll-bounce 1.8s infinite;
}

@keyframes scroll-bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(6px); }
  60% { transform: translateY(3px); }
}

/* Hide cue after user scrolls a bit */
.scroll-cue.is-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(8px);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .chevron { animation: none; }
  .scroll-cue { transition: none; }
}
.portrait-caption {
  display: grid;
  gap: 0.25rem;
  margin-top: 2rem;
  font-size: 0.95rem;
  line-height: 1.3;
}
.caption-title {
  font-weight: 600;
  letter-spacing: .01em;
}
.caption-body {
  opacity: .85;
}

/* Floating CTA (bottom-right) */
.trial-fab {
  position: fixed;
  right: clamp(12px, 2vw, 24px);
  bottom: calc(50px + env(safe-area-inset-bottom));
  z-index: 1000;

  display: inline-flex;
  align-items: center;
  gap: 0.5rem;

  background: var(--accent-blue);
  color: var(--text-on-accent);
  font-family: 'Cinzel', serif;
  font-size: 0.95rem;
  line-height: 1;
  padding: 0.9rem 1.15rem;
  border-radius: 9999px;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(0,0,0,0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
  will-change: transform, opacity;
}

.trial-fab:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0,0,0,0.28);
}

.trial-fab:active {
  transform: translateY(0);
  box-shadow: 0 8px 18px rgba(0,0,0,0.22);
}

.trial-fab--hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
}

@media (max-width: 640px) {
  .trial-fab {
    font-size: 0.9rem;
    padding: 0.85rem 1rem;
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .trial-fab { transition: none; }
}


/* 3-up layout */
.three-up {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(50px, 2vw, 0px);
}

.three-card {
  padding: 0; /* keep your landing spacing consistent */
  max-width: 400px;
}

/* Responsive: 2 cols at md, 3 cols at lg */
@media (min-width: 720px) {
  .three-up { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (min-width: 1024px) {
  .three-up { grid-template-columns: repeat(3, minmax(0,1fr)); }
}

/* Mini testimonials cross-fade */
#testimonials .testimonial-rotator { position: relative; margin-top: .5rem; min-height: 120px; }
#testimonials .t-item { position: absolute; inset: 0; opacity: 0; transition: opacity 500ms ease;
  display: grid; place-content: center; text-align: left; padding: 0; }
#testimonials .t-item.is-active { opacity: 1; }
#testimonials blockquote { margin: 0 0 .4rem 0; font-style: italic; line-height: 1.5; }
#testimonials figcaption { font-family: 'Cinzel', serif; font-size: .95rem; opacity: .85; }

/* Optional: balance long headings on wide screens */
.landing-section-heading { text-wrap: balance; }