/* Frucado landing page v2 — layout, motion and responsive rules that don't fit inline styles.
   Tokens come from Brand_assets/Frucado Design System/tokens/*.css — no new values invented here. */

html { scroll-behavior: smooth; }
body { overflow-x: hidden; }

/* ---------- Nav ---------- */
.fr-nav-pill {
  transition: background var(--duration-base) var(--ease-standard),
              border-color var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard),
              backdrop-filter var(--duration-base) var(--ease-standard);
}

.fr-nav-logo { transition: opacity var(--duration-fast) var(--ease-standard); }
.fr-nav-logo:hover { opacity: .78; }

.fr-nav-link {
  position: relative;
  transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}
.fr-nav-link:hover { background: rgba(255,255,255,.14); color: var(--paper); }

.fr-nav-cta { transition: background var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); }
.fr-nav-cta:hover { background: var(--accent-hover); transform: scale(1.04); }

.fr-nav-lang { transition: background var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); }
.fr-nav-lang:hover { background: rgba(255,255,255,.26) !important; transform: scale(1.08); }

@media (prefers-reduced-motion: reduce) {
  .fr-nav-logo, .fr-nav-link, .fr-nav-cta, .fr-nav-lang { transition: none; }
}

/* ---------- Hero video treatment (brief §4) ---------- */
/* min-height (not height) — 90vh leaves the next section peeking in at first paint, but tall copy can still grow the section. */
.fr-hero { position: relative; overflow: hidden; background: var(--crate-950); min-height: 90vh; display: flex; align-items: center; }
.fr-hero-h1 { font-size: var(--text-display-2); }
@media (max-width: 768px) {
  .fr-hero-h1 { font-size: var(--text-display-3); }
}
.fr-hero-media { position: absolute; inset: 0; }
.fr-hero-media video,
.fr-hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(1.05) contrast(1.03); }
.fr-hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(4,23,12,.92) 0%, rgba(4,23,12,.72) 42%, rgba(4,23,12,0) 68%, rgba(4,23,12,0) 100%);
}
.fr-hero-tint {
  position: absolute; inset: 0; mix-blend-mode: multiply;
  background: linear-gradient(100deg, var(--crate-900) 0%, var(--crate-900) 42%, transparent 68%, transparent 100%);
  opacity: .35;
}
@media (max-width: 768px) {
  .fr-hero-scrim { background: linear-gradient(180deg, rgba(4,23,12,.92) 0%, rgba(4,23,12,.78) 46%, rgba(4,23,12,0) 70%, rgba(4,23,12,0) 100%); }
  .fr-hero-tint { background: linear-gradient(180deg, var(--crate-900) 0%, var(--crate-900) 46%, transparent 70%, transparent 100%); }
  .fr-hero-inner { padding-top: 92px !important; }
}
/* Mobile never autoplays video — JS swaps in the poster image only below 768px. */

/* ---------- Six-step section — Explee-style sticky card stack ----------
   Pure CSS: each card is position:sticky with a slightly larger `top` and z-index
   than the one before, so ordinary scrolling makes each card ride up and stack on
   the last, leaving a sliver of every earlier card peeking out above it. */
.fr-stack { position: relative; }
.fr-stack-card-wrap { position: sticky; }
.fr-stack-card {
  display: flex; align-items: center; gap: 40px;
  min-height: 340px;
  padding: 36px 40px;
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-3);
  margin-bottom: 24px;
}
.fr-stack-text { flex: 0 0 28%; min-width: 0; }
.fr-stack-visual { flex: 1 1 auto; min-width: 0; }

/* "Hoe het werkt" step visuals — animated mockups per step */
@keyframes fr-om-dot { 0% { left: 0; opacity: 0; } 18% { opacity: 1; } 82% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
@keyframes fr-om-scan { 0% { transform: translateX(-100%); } 100% { transform: translateX(320%); } }
@keyframes fr-om-caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* Step 1 visual's sources+panel grid needs the two columns side by side only when there's
   room for both (desktop sticky-stack cards); below that it stacks, or the fixed-width
   source tiles crush the panel down to a sliver. */
.fr-step1-grid { min-width: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: center; gap: 20px; }
@media (max-width: 1023px) {
  .fr-step1-grid { grid-template-columns: 1fr; }
}

.fr-reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out); }
.fr-reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ---------- Founder letter ---------- */
.fr-typing-sign { transition: opacity var(--duration-slow) var(--ease-out); }

/* ---------- FAQ accordion ---------- */
.fr-faq-panel { display: grid; grid-template-rows: 0fr; overflow: hidden; transition: grid-template-rows var(--duration-base) var(--ease-standard); }
.fr-faq-panel.is-open { grid-template-rows: 1fr; }
.fr-faq-panel > div { overflow: hidden; opacity: 0; transition: opacity var(--duration-fast) var(--ease-standard); min-height: 0; }
.fr-faq-panel.is-open > div { opacity: 1; }
.fr-faq-chevron { transition: transform var(--duration-fast) var(--ease-standard); }
.fr-faq-chevron.is-open { transform: rotate(180deg); }

/* ---------- Reduced motion: render everything in its final state ---------- */
@media (prefers-reduced-motion: reduce) {
  .fr-reveal { transition: none; opacity: 1; transform: none; }
  .fr-faq-panel { transition: none; }
  .fr-faq-chevron { transition: none; }
  .fr-typing-sign { transition: none; }
  html { scroll-behavior: auto; }
}
.fr-save-data .fr-hero-media video { display: none; }

/* ---------- Responsive grids ---------- */
.fr-diff-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.fr-footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; }

@media (max-width: 900px) {
  .fr-diff-grid { grid-template-columns: 1fr; }
  .fr-footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .fr-footer-grid { grid-template-columns: 1fr; }
}