/* ============================================================
   StoryFuze — Public marketing site overrides ("Duotone Motion")
   Fișier NOU, încărcat DUPĂ storyfuze.css, DOAR pe paginile
   publice storyfuze (nu autentificat, sau home/terms/politics/
   cookies/login/register/lost-password) — vezi header.php,
   blocul `$storyfuzeCssFiles`.

   Scop: brief /_plans/storyfuze-public-site-brief.md — nav fix
   (logo stricat de public_navbar.css:28 `nav img{height:auto}`),
   nav compact sticky+blur, hamburger complet <860px, secțiuni de
   landing (hero/features/steps/marquee/testimonials/pricing/faq/
   cta/footer) și `.sf-reveal[data-stagger]`.

   TOATE selectoarele sunt scopate sub html[data-platform="storyfuze"]
   — zero impact pe ifindspec/avocatescu. NU se modifică
   public_navbar.css (e ifindspec) — se suprascrie doar aici, în
   scope-ul storyfuze, cu specificitate mai mare.
   ============================================================ */

/* Smooth scroll baseline pentru ancorele interne (#features/#pricing/#faq).
   JS (initSmoothAnchorScroll) apelează scrollIntoView({behavior:'smooth'})
   pentru linkurile interceptate; regula de aici e fallback pentru orice
   jump nativ necapturat de JS (ex. înainte de DOMContentLoaded). Dezactivat
   sub prefers-reduced-motion — vezi regula existentă de mai jos. */
html[data-platform="storyfuze"] {
  scroll-behavior: smooth;
}

/* ==========================================================================
   1. NAV — FIX logo + compact + sticky + blur
   ========================================================================== */

/* FIX critic: public_navbar.css:28 `nav img { height: auto }` se aplică
   global pe orice <nav><img> — inclusiv pe storyfuze, unde logo-ul are
   width mare (ex. 1920px) și fără height fix devine ~545px. Restabilim
   height fix + width auto, cu specificitate mai mare (nav.sf-nav + clasă).
   !important e obligatoriu — fără el, public_navbar.css:28 câștigă la
   egalitate de specificitate prin ordinea de încărcare (vine după). Logo
   48px pe desktop (interval 44-52px cerut), redus la 40px sub 860px ca
   să nu domine hamburger-ul compact. */
html[data-platform="storyfuze"] nav.sf-nav img,
html[data-platform="storyfuze"] .sf-nav-brand img {
  height: 36px !important;
  width: auto;
  max-width: none;
}

@media (max-width: 860px) {
  html[data-platform="storyfuze"] nav.sf-nav img,
  html[data-platform="storyfuze"] .sf-nav-brand img {
    height: 32px !important;
  }
}

html[data-platform="storyfuze"] .sf-nav {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 68px;
  padding-inline: 24px;
  background: rgba(13, 20, 32, 0.85);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--sf-motion-base, 280ms) var(--sf-ease-out, ease),
              -webkit-backdrop-filter var(--sf-motion-base, 280ms) var(--sf-ease-out, ease),
              backdrop-filter var(--sf-motion-base, 280ms) var(--sf-ease-out, ease);
}

html[data-platform="storyfuze"] .sf-nav.is-scrolled {
  border-bottom-color: rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

html[data-platform="storyfuze"] .sf-nav-brand {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  flex: 0 0 auto;
}

html[data-platform="storyfuze"] .sf-nav-brand picture,
html[data-platform="storyfuze"] .sf-nav-brand img {
  display: block;
}

/* Skip-link — vizibil doar la focus (accesibilitate, cerut de brief §1.1) */
html[data-platform="storyfuze"] .sf-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--primaryColor);
  /* text închis pe cyan (12.6:1) — --pageBackgroundColor (portocaliu) dădea 1.62 la focus */
  color: #0a0a0a;
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: 0 0 6px 0;
}

html[data-platform="storyfuze"] .sf-skip-link:focus {
  left: 0;
}

@media (max-width: 860px) {
  html[data-platform="storyfuze"] .sf-nav {
    height: 56px;
    padding-inline: 20px;
  }
}

/* ==========================================================================
   2. NAV — hamburger, completare stare .is-open (baza e în storyfuze.css:811-859)
   ========================================================================== */

/* Sub 860px, meniul deschis trebuie să fie vizibil peste conținut, cu
   același tratament de suprafață (blur + fundal) ca nav-ul, nu alb simplu
   (`var(--white)` din storyfuze.css e surface generică, nu neagă temele). */
@media (max-width: 860px) {
  html[data-platform="storyfuze"] .sf-nav-links.is-open {
    background: rgba(13, 20, 32, 0.96);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.6);
    z-index: 99;
  }

  html[data-platform="storyfuze"] .sf-nav-links a,
  html[data-platform="storyfuze"] .sf-nav-links .sf-btn-fill {
    width: 100%;
  }
}

html[data-platform="storyfuze"] .sf-nav-toggle:focus-visible,
html[data-platform="storyfuze"] .sf-nav-links a:focus-visible,
html[data-platform="storyfuze"] .sf-btn-fill:focus-visible,
html[data-platform="storyfuze"] .sf-btn-line:focus-visible {
  outline: 2px solid var(--primaryColor);
  outline-offset: 2px;
}

/* ==========================================================================
   3. HERO — duotone glow + product mock (fake editor UI, CSS/SVG-only)
   ========================================================================== */

html[data-platform="storyfuze"] .sf-hero-split {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
  overflow: hidden;
}

@media (min-width: 1024px) {
  html[data-platform="storyfuze"] .sf-hero-split {
    grid-template-columns: 46% 1fr;
    gap: 56px;
  }
}

/* Glow duotone — un singur strat radial, asimetric dreapta-sus, în spatele mock-ului */
html[data-platform="storyfuze"] .sf-hero-glow {
  position: absolute;
  top: -10%;
  right: -8%;
  width: 60%;
  height: 70%;
  pointer-events: none;
  background:
    radial-gradient(circle at 70% 30%, rgba(70, 224, 232, 0.18), transparent 60%),
    radial-gradient(circle at 85% 55%, rgba(255, 122, 46, 0.10), transparent 55%);
  filter: blur(80px);
  z-index: 0;
  animation: sf-glow-drift 14s ease-in-out infinite alternate;
}

@keyframes sf-glow-drift {
  from { transform: translate(0, 0); }
  to { transform: translate(-12px, 12px); }
}

/* Mock produs — fake editor UI */
html[data-platform="storyfuze"] .sf-hero-mock {
  position: relative;
  z-index: 1;
  border-radius: 16px;
  background: #101827;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 40px 80px -32px rgba(0, 0, 0, 0.7);
  overflow: hidden;
  transform: perspective(1200px) rotateY(-6deg) rotateX(2deg);
  transition: transform var(--sf-motion-slow, 560ms) var(--sf-ease-out, ease);
}

@media (max-width: 1023px) {
  html[data-platform="storyfuze"] .sf-hero-mock {
    transform: none;
  }
}

html[data-platform="storyfuze"] .sf-mock-chrome {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding-inline: 12px;
  background: #0d1420;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

html[data-platform="storyfuze"] .sf-mock-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  opacity: 0.55;
}

html[data-platform="storyfuze"] .sf-mock-dot--close { background: #ff5f57; }
html[data-platform="storyfuze"] .sf-mock-dot--min { background: #febc2e; }
html[data-platform="storyfuze"] .sf-mock-dot--zoom { background: #28c840; }

html[data-platform="storyfuze"] .sf-mock-title {
  margin-left: 6px;
  font-size: 12px;
  color: #9aa5b5;
  font-family: var(--ifs-font-body);
}

html[data-platform="storyfuze"] .sf-mock-body {
  display: flex;
  min-height: 220px;
}

html[data-platform="storyfuze"] .sf-mock-sidebar {
  width: 56px;
  flex: 0 0 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding-top: 20px;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
}

html[data-platform="storyfuze"] .sf-mock-sidebar svg {
  width: 20px;
  height: 20px;
  stroke: #9aa5b5;
  stroke-width: 1.5px;
  fill: none;
}

html[data-platform="storyfuze"] .sf-mock-canvas {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0f1a2a, #16202f);
  padding: 20px;
}

html[data-platform="storyfuze"] .sf-mock-waveform {
  width: 100%;
  height: 64px;
  color: var(--primaryColor);
  opacity: 0.45;
}

html[data-platform="storyfuze"] .sf-mock-caption {
  position: absolute;
  left: 16px;
  bottom: 16px;
  border-radius: 8px;
  padding: 6px 12px;
  background: rgba(13, 20, 32, 0.85);
  font-family: var(--ifs-font-body);
  font-weight: 600;
  font-size: 13px;
  color: var(--textColor);
}

html[data-platform="storyfuze"] .sf-mock-timeline {
  position: relative;
  padding: 12px 16px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: #0d1420;
}

html[data-platform="storyfuze"] .sf-mock-track {
  height: 14px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.05);
  margin-bottom: 6px;
  position: relative;
  overflow: hidden;
}

html[data-platform="storyfuze"] .sf-mock-clip {
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 8%;
  width: 34%;
  border-radius: 3px;
  border: 1px solid #ff7a2e;
  background: rgba(255, 122, 46, 0.14);
}

html[data-platform="storyfuze"] .sf-mock-playhead {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  background: var(--primaryColor);
  animation: sf-playhead 6s linear infinite;
}

@keyframes sf-playhead {
  from { transform: translateX(0); }
  to { transform: translateX(calc(100% - 2px)); }
}

/* ==========================================================================
   4. FEATURES — bento asimetric (1 featured 2x2 + 2 satelit), nu 3 identice
   ========================================================================== */

html[data-platform="storyfuze"] .sf-features-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 860px) {
  html[data-platform="storyfuze"] .sf-features-grid {
    grid-template-columns: 1.4fr 1fr;
    grid-template-rows: repeat(2, auto);
  }

  html[data-platform="storyfuze"] .sf-feature--featured {
    grid-row: 1 / 3;
    display: flex;
    flex-direction: column;
  }

  html[data-platform="storyfuze"] .sf-feature--featured .sf-feature-mock {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  html[data-platform="storyfuze"] .sf-feature--featured .sf-feature-mock .sf-mock-body {
    flex: 1 1 auto;
    min-height: 0;
  }
}

html[data-platform="storyfuze"] .sf-feature {
  position: relative;
  border-radius: 14px;
  border: 1px solid var(--bordersColor);
  background: var(--surfaceBg);
  padding: 32px;
  transition: transform var(--sf-motion-base, 180ms) var(--sf-ease-out, ease),
              border-color var(--sf-motion-base, 180ms) var(--sf-ease-out, ease);
}

html[data-platform="storyfuze"] .sf-feature:hover {
  transform: translateY(-4px);
  border-color: rgba(70, 224, 232, 0.28);
}

html[data-platform="storyfuze"] .sf-feature-eyebrow {
  display: block;
  font-family: var(--ifs-font-body);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primaryColor);
  margin-bottom: 12px;
}

html[data-platform="storyfuze"] .sf-feature-bullets {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

html[data-platform="storyfuze"] .sf-feature-bullets li {
  font-size: 13px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--fadeText);
}

/* ==========================================================================
   5. STEPS — "how it works", numere decorative Playfair
   ========================================================================== */

html[data-platform="storyfuze"] .sf-steps-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  position: relative;
}

@media (min-width: 860px) {
  html[data-platform="storyfuze"] .sf-steps-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

html[data-platform="storyfuze"] .sf-step-n {
  font-family: var(--ifs-font-heading);
  font-size: 40px;
  color: rgba(255, 122, 46, 0.62);
  margin: 0 0 8px;
  line-height: 1;
}

/* Mobil: stivă verticală cu linie stânga */
@media (max-width: 859px) {
  html[data-platform="storyfuze"] .sf-steps-grid {
    border-left: 1px dashed rgba(70, 224, 232, 0.25);
    padding-left: 20px;
  }
}

/* ==========================================================================
   6. MARQUEE — logo band, translateX infinit, pause on hover
   ========================================================================== */

html[data-platform="storyfuze"] .sf-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

html[data-platform="storyfuze"] .sf-marquee-track {
  display: flex;
  width: max-content;
  gap: 64px;
  animation: sf-marquee 32s linear infinite;
}

html[data-platform="storyfuze"] .sf-marquee:hover .sf-marquee-track,
html[data-platform="storyfuze"] .sf-marquee:focus-within .sf-marquee-track {
  animation-play-state: paused;
}

@keyframes sf-marquee {
  to { transform: translateX(-50%); }
}

html[data-platform="storyfuze"] .sf-marquee-item {
  flex: 0 0 auto;
  color: #c9d3df;
  opacity: 0.72;
  display: flex;
  align-items: center;
}

html[data-platform="storyfuze"] .sf-marquee-item svg {
  height: 22px;
  width: auto;
}

/* ==========================================================================
   7. TESTIMONIALS
   ========================================================================== */

html[data-platform="storyfuze"] .sf-testimonials-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 860px) {
  html[data-platform="storyfuze"] .sf-testimonials-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

html[data-platform="storyfuze"] .sf-testimonial {
  border-radius: 14px;
  border: 1px solid var(--bordersColor);
  background: var(--surfaceBg);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

html[data-platform="storyfuze"] .sf-testimonial-quote {
  font-size: 15px;
  line-height: 1.6;
  color: var(--textColor);
  margin: 0;
}

html[data-platform="storyfuze"] .sf-testimonial-author {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
}

html[data-platform="storyfuze"] .sf-testimonial-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #131c2b;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ifs-font-body);
  font-weight: 600;
  font-size: 14px;
  color: var(--primaryColor);
  flex: 0 0 auto;
}

html[data-platform="storyfuze"] .sf-testimonial-meta {
  font-size: 13px;
  color: var(--fadeText);
}

/* ==========================================================================
   8. PRICING — 3+ planuri, cel din mijloc evidențiat
   ========================================================================== */

html[data-platform="storyfuze"] .sf-pricing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 860px) {
  html[data-platform="storyfuze"] .sf-pricing-grid {
    grid-template-columns: repeat(var(--sf-pricing-cols, 4), 1fr);
    align-items: stretch;
  }
}

html[data-platform="storyfuze"] .sf-plan-card {
  position: relative;
  border-radius: 14px;
  border: 1px solid var(--bordersColor);
  background: var(--surfaceBg);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  transition: transform var(--sf-motion-base, 180ms) var(--sf-ease-out, ease),
              border-color var(--sf-motion-base, 180ms) var(--sf-ease-out, ease);
}

html[data-platform="storyfuze"] .sf-plan-card:hover {
  transform: translateY(-4px);
  border-color: rgba(70, 224, 232, 0.28);
}

html[data-platform="storyfuze"] .sf-plan-card--recommended {
  border-color: var(--primaryColor);
  background: #131c2b;
  box-shadow: 0 24px 48px -24px rgba(70, 224, 232, 0.25);
}

@media (min-width: 860px) {
  html[data-platform="storyfuze"] .sf-plan-card--recommended {
    transform: translateY(-8px);
  }
}

html[data-platform="storyfuze"] .sf-plan-badge {
  position: absolute;
  top: -12px;
  left: 24px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--primaryColor);
  color: var(--pageBackgroundColor);
}

html[data-platform="storyfuze"] .sf-plan-price {
  font-family: var(--ifs-font-body);
  font-weight: 600;
  font-size: 32px;
  font-variant-numeric: tabular-nums;
  margin: 12px 0;
}

html[data-platform="storyfuze"] .sf-plan-price small {
  font-size: 14px;
  font-weight: 500;
  color: var(--fadeText);
}

html[data-platform="storyfuze"] .sf-plan-features {
  list-style: none;
  margin: 16px 0 24px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
  color: var(--fadeText);
}

/* Toggle billing lunar / anual */
html[data-platform="storyfuze"] .sf-billing-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px;
  border-radius: 999px;
  border: 1px solid var(--bordersColor);
  background: var(--surfaceBg);
}

html[data-platform="storyfuze"] .sf-billing-toggle button {
  border: none;
  background: transparent;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--fadeText);
  cursor: pointer;
  transition: background var(--sf-motion-fast, 160ms) var(--sf-ease-out, ease),
              color var(--sf-motion-fast, 160ms) var(--sf-ease-out, ease);
}

html[data-platform="storyfuze"] .sf-billing-toggle button.is-active {
  background: var(--primaryColor);
  color: var(--pageBackgroundColor);
}

/* ==========================================================================
   9. FAQ — accordion nativ <details>/<summary>, chevron rotativ
   ========================================================================== */

html[data-platform="storyfuze"] .sf-faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 72ch;
}

html[data-platform="storyfuze"] .sf-faq-item {
  border: 1px solid var(--bordersColor);
  border-radius: 12px;
  background: var(--surfaceBg);
  overflow: hidden;
}

html[data-platform="storyfuze"] .sf-faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  font-weight: 600;
  font-size: 15px;
  color: var(--textColor);
}

html[data-platform="storyfuze"] .sf-faq-item summary::-webkit-details-marker {
  display: none;
}

/* Anulează săgeata ::after globală din storyfuze.css (folosită de FAQ-ul din
   app/subscriptions) — pe pagina publică chevronul e SVG-ul .sf-faq-chevron
   de mai jos; fără asta apar 2 săgeți suprapuse. */
html[data-platform="storyfuze"] .sf-faq-item summary::after {
  content: none;
}

html[data-platform="storyfuze"] .sf-faq-chevron {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  transition: transform 180ms var(--sf-ease-out, ease);
  color: var(--primaryColor);
}

html[data-platform="storyfuze"] .sf-faq-item[open] .sf-faq-chevron {
  transform: rotate(90deg);
}

html[data-platform="storyfuze"] .sf-faq-item .sf-faq-body {
  padding: 0 20px 18px;
  color: var(--fadeText);
  font-size: 14px;
  line-height: 1.6;
  animation: sf-faq-fade 180ms var(--sf-ease-out, ease);
}

@keyframes sf-faq-fade {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   10. CTA final — bandă cu imagine + scrim
   ========================================================================== */

html[data-platform="storyfuze"] #cta {
  /* spațiu suplimentar sub bandă, ca banner-ul fix de cookie-uri (jos-dreapta)
     să nu acopere CTA-ul — #cta e ultima secțiune reală a paginii (mutat de
     pe #pricing, unde crea un gol prea mare înainte de FAQ). */
  padding-bottom: 260px;
}

html[data-platform="storyfuze"] .sf-cta {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  padding: 64px 40px;
  background-size: cover;
  background-position: center;
}

html[data-platform="storyfuze"] .sf-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(13, 20, 32, 0.94) 0%, rgba(13, 20, 32, 0.72) 60%, rgba(13, 20, 32, 0.55) 100%);
  z-index: 0;
}

html[data-platform="storyfuze"] .sf-cta-content {
  position: relative;
  z-index: 1;
  max-width: 560px;
}

/* ==========================================================================
   11. FOOTER — 4 coloane -> 2 -> 1
   ========================================================================== */

html[data-platform="storyfuze"] .sf-footer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}

@media (max-width: 1023px) {
  html[data-platform="storyfuze"] .sf-footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  html[data-platform="storyfuze"] .sf-footer-grid {
    grid-template-columns: 1fr;
  }
}

html[data-platform="storyfuze"] .sf-footer-col-title {
  font-family: var(--ifs-font-body);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--textColor);
  margin: 0 0 16px;
}

html[data-platform="storyfuze"] .sf-footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

html[data-platform="storyfuze"] .sf-footer-links a {
  color: var(--fadeText);
  text-decoration: none;
  font-size: 14px;
  transition: color var(--sf-motion-fast, 160ms) var(--sf-ease-out, ease);
}

html[data-platform="storyfuze"] .sf-footer-links a:hover {
  color: var(--primaryColor);
}

html[data-platform="storyfuze"] .sf-footer-social {
  display: flex;
  gap: 16px;
  margin-top: 16px;
}

html[data-platform="storyfuze"] .sf-footer-social a {
  color: var(--fadeText);
  display: inline-flex;
}

html[data-platform="storyfuze"] .sf-footer-social a svg {
  width: 18px;
  height: 18px;
}

html[data-platform="storyfuze"] .sf-footer-bottom {
  border-top: 1px solid var(--bordersColor);
  margin-top: 48px;
  padding-top: 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: var(--fadeText);
}

html[data-platform="storyfuze"] .sf-footer-bottom-links {
  display: flex;
  gap: 16px;
}

html[data-platform="storyfuze"] .sf-footer-bottom-links a {
  color: var(--fadeText);
  text-decoration: none;
}

html[data-platform="storyfuze"] .sf-footer-bottom-links a:hover {
  color: var(--primaryColor);
}

/* ==========================================================================
   12. REVEAL + STAGGER (completare peste .sf-reveal din storyfuze.css:965-980)
   ========================================================================== */

/* Stagger: copiii cu [data-stagger] primesc delay incremental via --i,
   setat din JS (storyfuze-public.js). Cascadă limitată — de la al 6-lea
   frate încolo, delay plafonat la 250ms (brief §3.5 pct.2). */
html[data-platform="storyfuze"].sf-js .sf-reveal[data-stagger] > * {
  transition-delay: calc(var(--i, 0) * 50ms);
}

html[data-platform="storyfuze"] .sf-reveal[data-stagger] > *:nth-child(n+6) {
  transition-delay: 250ms;
}

/* Underline duotone sub titlurile de secțiune active */
html[data-platform="storyfuze"] .sf-section-title {
  position: relative;
  display: inline-block;
}

html[data-platform="storyfuze"] .sf-section-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  height: 2px;
  width: 100%;
  background: linear-gradient(90deg, var(--primaryColor), var(--secondaryColor));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--sf-motion-slow, 560ms) var(--sf-ease-out, ease);
}

html[data-platform="storyfuze"] .sf-reveal.is-visible .sf-section-title::after {
  transform: scaleX(1);
}

/* ==========================================================================
   13. reduced-motion — dezactivare completă a animațiilor/tranzițiilor
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html[data-platform="storyfuze"] .sf-reveal,
  html[data-platform="storyfuze"] .sf-reveal[data-stagger] > * {
    opacity: 1 !important;
    transform: none !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }

  html[data-platform="storyfuze"] .sf-marquee-track,
  html[data-platform="storyfuze"] .sf-hero-glow,
  html[data-platform="storyfuze"] .sf-mock-playhead {
    animation: none !important;
  }

  html[data-platform="storyfuze"] .sf-hero-mock {
    transform: none !important;
  }

  html[data-platform="storyfuze"] .sf-nav,
  html[data-platform="storyfuze"] .sf-feature,
  html[data-platform="storyfuze"] .sf-plan-card,
  html[data-platform="storyfuze"] .sf-nav-links,
  html[data-platform="storyfuze"] .sf-section-title::after {
    transition: none !important;
  }

  html[data-platform="storyfuze"] * {
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   14. Completări landing.php — hero copy column, micro-copy, feature image,
   step wrapper (clase noi, minimale, folosite doar de landing.php/footer.php)
   ========================================================================== */

html[data-platform="storyfuze"] .sf-hero-copy {
  text-align: left;
  max-width: 46ch;
}

html[data-platform="storyfuze"] .sf-hero-micro {
  color: var(--fadeText);
  font-size: 13px;
  margin: 12px 0 0;
}

html[data-platform="storyfuze"] .sf-feature-mock {
  margin-top: 20px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: #101827;
}

html[data-platform="storyfuze"] .sf-feature-mock .sf-mock-body {
  min-height: 160px;
}

html[data-platform="storyfuze"] .sf-feature-mock.sf-accent-orange {
  border-color: rgba(255, 122, 46, 0.18);
}

html[data-platform="storyfuze"] .sf-feature-mock.sf-accent-duotone {
  border-color: rgba(70, 224, 232, 0.14);
}

html[data-platform="storyfuze"] .sf-mock-swatches {
  display: flex;
  gap: 10px;
  padding: 24px 20px 8px;
}

html[data-platform="storyfuze"] .sf-mock-swatch {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

html[data-platform="storyfuze"] .sf-mock-type-sample {
  padding: 4px 20px 28px;
  font-family: var(--ifs-font-heading);
  font-size: 42px;
  line-height: 1;
  color: var(--textColor);
  opacity: 0.85;
}

html[data-platform="storyfuze"] .sf-mock-queue {
  list-style: none;
  margin: 0;
  padding: 16px 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

html[data-platform="storyfuze"] .sf-mock-queue li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  font-family: var(--ifs-font-body);
  font-size: 12px;
  color: #9aa5b5;
}

html[data-platform="storyfuze"] .sf-mock-queue-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primaryColor);
  flex: 0 0 auto;
}

html[data-platform="storyfuze"] .sf-mock-queue-dot--muted {
  background: #9aa5b5;
  opacity: 0.5;
}

/* ---- richer module mockups: transcript, formats, layers, comp, channels ---- */

html[data-platform="storyfuze"] .sf-mock-formats {
  display: flex;
  gap: 6px;
  margin-left: auto;
}

html[data-platform="storyfuze"] .sf-mock-formats--block {
  padding: 0 20px 20px;
  margin-left: 0;
  flex-wrap: wrap;
}

html[data-platform="storyfuze"] .sf-mock-format-tab {
  font-family: var(--ifs-font-body);
  font-size: 10px;
  font-weight: 600;
  color: #6b7686;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  padding: 3px 8px;
  white-space: nowrap;
}

html[data-platform="storyfuze"] .sf-mock-format-tab--active {
  color: var(--textColor);
  background: rgba(70, 224, 232, 0.14);
  border-color: rgba(70, 224, 232, 0.4);
}

html[data-platform="storyfuze"] .sf-mock-transcript {
  width: 42%;
  flex: 0 0 42%;
  padding: 14px 12px;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

html[data-platform="storyfuze"] .sf-mock-transcript-line {
  margin: 0 0 10px;
  font-family: var(--ifs-font-body);
  font-size: 11px;
  line-height: 1.4;
  color: #8b95a5;
}

html[data-platform="storyfuze"] .sf-mock-transcript-line--cut {
  text-decoration: line-through;
  opacity: 0.4;
}

html[data-platform="storyfuze"] .sf-mock-transcript-line--active {
  color: var(--textColor);
  font-weight: 600;
  border-left: 2px solid var(--primaryColor);
  padding-left: 8px;
  margin-left: -10px;
}

html[data-platform="storyfuze"] .sf-mock-clip--caption {
  border-color: var(--primaryColor);
  background: rgba(70, 224, 232, 0.14);
}

html[data-platform="storyfuze"] .sf-mock-layers {
  width: 38%;
  flex: 0 0 38%;
  padding: 14px 12px;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
}

html[data-platform="storyfuze"] .sf-mock-layer {
  margin: 0 0 10px;
  font-family: var(--ifs-font-body);
  font-size: 11px;
  color: #8b95a5;
  padding: 6px 8px;
  border-radius: 6px;
}

html[data-platform="storyfuze"] .sf-mock-layer--active {
  color: var(--textColor);
  font-weight: 600;
  background: rgba(255, 122, 46, 0.12);
}

html[data-platform="storyfuze"] .sf-mock-canvas--comp {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
}

html[data-platform="storyfuze"] .sf-mock-comp-logo {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: linear-gradient(135deg, #ff7a2e, #46e0e8);
}

html[data-platform="storyfuze"] .sf-mock-comp-headline {
  font-family: var(--ifs-font-heading);
  font-size: 22px;
  color: var(--textColor);
}

html[data-platform="storyfuze"] .sf-mock-comp-cta {
  font-family: var(--ifs-font-body);
  font-size: 11px;
  font-weight: 600;
  color: #131c2b;
  background: #ff7a2e;
  border-radius: 999px;
  padding: 4px 12px;
}

html[data-platform="storyfuze"] .sf-mock-channels {
  display: flex;
  gap: 8px;
  padding: 16px 16px 0;
  flex-wrap: wrap;
}

html[data-platform="storyfuze"] .sf-mock-channel {
  font-family: var(--ifs-font-body);
  font-size: 11px;
  font-weight: 600;
  color: #9aa5b5;
  border-radius: 999px;
  padding: 4px 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

html[data-platform="storyfuze"] .sf-mock-channel--connected {
  color: var(--textColor);
  border-color: rgba(70, 224, 232, 0.35);
  background: rgba(70, 224, 232, 0.08);
}

html[data-platform="storyfuze"] .sf-mock-queue-handle {
  color: #4a5568;
  font-size: 11px;
  line-height: 1;
  flex: 0 0 auto;
}

html[data-platform="storyfuze"] .sf-mock-queue-text {
  flex: 1 1 auto;
}

html[data-platform="storyfuze"] .sf-mock-queue-meta {
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--primaryColor);
  opacity: 0.85;
}

html[data-platform="storyfuze"] .sf-mock-queue-meta--muted {
  color: #9aa5b5;
  opacity: 0.6;
}

html[data-platform="storyfuze"] .sf-step {
  min-width: 0;
}

html[data-platform="storyfuze"] .sf-footer-col {
  min-width: 0;
}

html[data-platform="storyfuze"] .sf-footer-brand {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 8px;
}

@media (min-width: 1024px) {
  html[data-platform="storyfuze"] .sf-footer-brand {
    grid-column: auto;
    margin-bottom: 0;
  }
}

/* Logo orizontal colorat (fundal dark) în footer — NU reutilizează
   .sf-nav-brand (ar moșteni height:48px!important din regula #1 NAV);
   clasă proprie, dimensionată proporțional independent de nav. */
html[data-platform="storyfuze"] .sf-footer-brand-logo {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}

html[data-platform="storyfuze"] .sf-footer-brand-logo img {
  height: 32px;
  width: auto;
  max-width: none;
}

html[data-platform="storyfuze"] .sf-footer-newsletter {
  grid-column: 1 / -1;
  border-top: 1px solid var(--bordersColor);
  margin-top: 8px;
  padding-top: 32px;
}

/* Formular funcțional fără JS: <form method="post"> nativ, input+buton
   ca elemente de bloc normale — niciun comportament depinde de JS.
   max-width limitează lățimea pe desktop (grid-column full-width mai
   sus), ca inputul să nu se întindă pe toată lățimea footerului. */
html[data-platform="storyfuze"] .sf-newsletter-form {
  display: flex;
  gap: 8px;
  margin: 12px 0;
  max-width: 400px;
}

html[data-platform="storyfuze"] .sf-newsletter-form .sf-input {
  flex: 1 1 auto;
  min-width: 0;
}

html[data-platform="storyfuze"] .sf-newsletter-form .sf-btn-fill {
  flex: 0 0 auto;
}

/* ---------------------------------------------------------------------
   Legal pages (Terms / Privacy / Cookies) — /terms /politics /cookies
   ------------------------------------------------------------------ */
html[data-platform="storyfuze"] .sf-legal {
  max-width: 820px;
  margin: 0 auto;
  padding: 56px 24px 96px;
  color: var(--textColor);
  line-height: 1.7;
  font-size: 16px;
}

html[data-platform="storyfuze"] .sf-legal h1 {
  font-size: clamp(28px, 4vw, 40px);
  margin-bottom: 8px;
}

html[data-platform="storyfuze"] .sf-legal-updated {
  color: rgba(var(--primaryColorRgb, 70, 224, 232), 0.75);
  font-size: 14px;
  margin-bottom: 32px;
}

html[data-platform="storyfuze"] .sf-legal h2 {
  font-size: clamp(20px, 3vw, 26px);
  margin-top: 48px;
  margin-bottom: 16px;
  scroll-margin-top: 96px;
}

html[data-platform="storyfuze"] .sf-legal h3 {
  font-size: 18px;
  margin-top: 28px;
  margin-bottom: 12px;
  scroll-margin-top: 96px;
}

html[data-platform="storyfuze"] .sf-legal p {
  margin-bottom: 16px;
}

html[data-platform="storyfuze"] .sf-legal-toc {
  border: 1px solid rgba(var(--primaryColorRgb, 70, 224, 232), 0.25);
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 40px;
  background: rgba(var(--primaryColorRgb, 70, 224, 232), 0.05);
}

html[data-platform="storyfuze"] .sf-legal-toc p {
  margin: 0 0 8px;
  font-weight: 600;
}

html[data-platform="storyfuze"] .sf-legal-toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

html[data-platform="storyfuze"] .sf-legal-toc a {
  color: var(--textColor);
  text-decoration: none;
  opacity: 0.85;
  transition: opacity var(--sf-motion-fast, 160ms) var(--sf-ease-out, ease),
              color var(--sf-motion-fast, 160ms) var(--sf-ease-out, ease);
}

html[data-platform="storyfuze"] .sf-legal-toc a:hover,
html[data-platform="storyfuze"] .sf-legal-toc a:focus-visible {
  color: var(--primaryColor);
  opacity: 1;
}

html[data-platform="storyfuze"] .sf-placeholder {
  background: rgba(255, 122, 46, 0.18);
  color: var(--secondaryColor);
  padding: 1px 6px;
  border-radius: 4px;
  font-style: normal;
  font-weight: 600;
}

html[data-platform="storyfuze"] .sf-legal-table-wrap {
  overflow-x: auto;
  margin-bottom: 24px;
}

html[data-platform="storyfuze"] .sf-legal table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

@media (max-width: 640px) {
  html[data-platform="storyfuze"] .sf-legal th,
  html[data-platform="storyfuze"] .sf-legal td {
    padding: 8px 10px;
  }
  html[data-platform="storyfuze"] .sf-legal th {
    white-space: normal;
  }
}

html[data-platform="storyfuze"] .sf-legal th,
html[data-platform="storyfuze"] .sf-legal td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(var(--primaryColorRgb, 70, 224, 232), 0.18);
  vertical-align: top;
}

html[data-platform="storyfuze"] .sf-legal th {
  color: var(--primaryColor);
  font-weight: 600;
  white-space: nowrap;
}

html[data-platform="storyfuze"] .sf-legal-manage-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--primaryColor);
  background: transparent;
  color: var(--textColor);
  font: inherit;
  cursor: pointer;
  transition: background var(--sf-motion-fast, 160ms) var(--sf-ease-out, ease);
}

html[data-platform="storyfuze"] .sf-legal-manage-btn:hover,
html[data-platform="storyfuze"] .sf-legal-manage-btn:focus-visible {
  background: rgba(var(--primaryColorRgb, 70, 224, 232), 0.12);
}

/* ==========================================================================
   14. COOKIE BANNER (componentă globală .cookie-banner din
   assets/brand/ifindspec/css/components/cookie.css — are width:100% global,
   se întinde pe toată lățimea paginii). Override scoped StoryFuze: card
   compact jos-dreapta, pe paleta brandului.
   ========================================================================== */
html[data-platform="storyfuze"] .cookie-banner {
  width: auto;
  max-width: min(420px, calc(100vw - 2rem));
  left: auto;
  right: 1rem;
  bottom: 1rem;
  background: var(--surfaceBg, #101827);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
  padding: 18px 20px;
  gap: 12px;
  align-items: flex-start;
}

html[data-platform="storyfuze"] .cookie-banner p {
  color: var(--textColor, #e6edf5);
  font-size: 14px;
  line-height: 1.5;
  padding: 0;
}

html[data-platform="storyfuze"] .cookie-banner #accept-cookies {
  background: var(--primaryColor, #46e0e8);
  color: #0d1420;
  border-radius: 999px;
  padding: 8px 18px;
  font-weight: 600;
  margin: 0;
}

html[data-platform="storyfuze"] .cookie-banner #reject-cookies {
  background: transparent;
  color: var(--textColor, #e6edf5);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  padding: 8px 18px;
  margin: 0;
}

@media (max-width: 560px) {
  html[data-platform="storyfuze"] .cookie-banner {
    left: 1rem;
    right: 1rem;
    max-width: none;
  }
  /* Room so the fixed banner does not permanently cover the footer LEGAL links. */
  html[data-platform="storyfuze"] .sf-footer {
    padding-bottom: 128px;
  }
}

/* ==========================================================================
   15. FIX-URI VIZUALE (critică vision DeepSeek V4, 10.09.2026)
   ========================================================================== */

/* CTA din navbar: `.sf-nav-links a` (storyfuze.css:798) suprascria culoarea
   butonului cu --fadeText → contrast 1.04 (text practic invizibil pe portocaliu).
   Specificitate mai mare → eticheta în navy închis. */
html[data-platform="storyfuze"] .sf-nav-links .sf-btn-fill {
  color: #0d1420;
}

/* Pricing: CTA-urile erau la înălțimi diferite (77px/39px diferență) fiindcă
   listele de feature-uri au lungimi diferite → împinge butonul la baza cardului. */
html[data-platform="storyfuze"] .sf-plan-card .sf-btn-fill {
  margin-top: auto;
  align-self: stretch;
}

/* Pricing: cardul „recommended" era decalat cu -8px → rândul de carduri era
   strâmb (top-uri 3735/3727/3735). Păstrăm evidența prin bordură+glow, fără offset. */
html[data-platform="storyfuze"] .sf-plan-card--recommended {
  transform: none;
}

/* Hero H1 se rupea pe 5 linii la 1440px (ultimul cuvânt orfan pe linie) →
   echilibrare linii + măsură limitată. */
html[data-platform="storyfuze"] .sf-h1 {
  text-wrap: balance;
  max-width: 15ch;
  margin-inline: auto;
}

/* FAQ: lista avea 720px într-un container de 1280px, aliniată stânga →
   jumătatea dreaptă goală. Centrăm blocul pe o măsură de citire. */
html[data-platform="storyfuze"] #faq .sf-container {
  max-width: 880px;
}

/* Titluri de secțiune: linia duotone tăia descendentele („Q", „p") → coborâm. */
html[data-platform="storyfuze"] .sf-section-title::after {
  bottom: -10px;
}

/* Hero: coloana de text era limitată la 460px → H1 (67px) se rupea pe 5 linii
   cu ultimul cuvânt orfan. Lărgim coloana ca titlul să respire (3-4 linii). */
html[data-platform="storyfuze"] .sf-hero-copy {
  max-width: 640px;
}

html[data-platform="storyfuze"] .sf-h1 {
  max-width: none;
}

/* FAQ: lista (720px) era lipită la stânga într-un container de 880px →
   jumătatea dreaptă părea goală. O centrăm. */
html[data-platform="storyfuze"] .sf-faq-list {
  margin-inline: auto;
}

/* ==========================================================================
   16. FOOTER — corecții aliniere (revizuire 10.09.2026)
   Baza .sf-footer din storyfuze.css:954 are text-align:center (moștenită din
   vechea bară de copyright simplă) → centra tot footer-ul nou, dar formularul
   newsletter rămânea la stânga. Revenim la aliniere pe stânga, consecventă cu
   gridul de coloane, și organizăm banda newsletter pe două coloane pe desktop.
   ========================================================================== */

html[data-platform="storyfuze"] .sf-footer {
  text-align: left;
  padding: 64px 24px 32px;
}

/* Every other section is capped at the same 1280px content column
   (.sf-container) — the footer had no max-width at all, so on desktop
   its 4 columns spread edge-to-edge with huge gaps between them while
   the rest of the page reads as a narrower, centred column above it. */
html[data-platform="storyfuze"] .sf-footer {
  max-width: 1280px;
  margin-inline: auto;
}

html[data-platform="storyfuze"] .sf-footer-newsletter {
  text-align: left;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px 48px;
}

@media (min-width: 1024px) {
  html[data-platform="storyfuze"] .sf-footer-newsletter {
    grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
    align-items: start;
  }
}

/* Textul introductiv + consimțământul stau în coloana din stânga, formularul în dreapta */
html[data-platform="storyfuze"] .sf-footer-newsletter .sf-footer-col-title,
html[data-platform="storyfuze"] .sf-footer-newsletter > .sf-hero-micro {
  grid-column: 1;
}

html[data-platform="storyfuze"] .sf-footer-newsletter .sf-newsletter-form {
  grid-column: 1;
}

@media (min-width: 1024px) {
  html[data-platform="storyfuze"] .sf-footer-newsletter .sf-newsletter-form {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin-top: 0;
  }
  html[data-platform="storyfuze"] .sf-footer-newsletter > .sf-hero-micro:last-of-type {
    grid-column: 2;
    grid-row: 3;
  }
}

/* ==========================================================================
   17. MODULE PREVIEWS v2 (revizuire 10.09.2026)
   Mockup-uri de produs mult mai bogate: preview video real + timeline cu clip-uri
   etichetate + transcript contrastat; straturi creative cu valori; coadă de
   publicare cu thumbnail-uri. Înlocuiesc vechile mockup-uri abstracte.
   ========================================================================== */

/* --- Video Studio: editor cu preview + transcript --- */
html[data-platform="storyfuze"] .sf-mock-editor {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  padding: 14px;
}

@media (min-width: 720px) {
  html[data-platform="storyfuze"] .sf-mock-editor {
    grid-template-columns: 1.3fr 1fr;
  }
}

html[data-platform="storyfuze"] .sf-mock-preview {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(120% 120% at 72% 12%, rgba(70, 224, 232, 0.34), transparent 55%),
    radial-gradient(120% 110% at 18% 92%, rgba(255, 122, 46, 0.30), transparent 58%),
    #0b1220;
}

html[data-platform="storyfuze"] .sf-mock-preview-glow {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 42%, rgba(8, 12, 20, 0.78) 100%);
}

html[data-platform="storyfuze"] .sf-mock-preview-subject {
  position: absolute;
  left: 50%;
  bottom: 16%;
  width: 32%;
  aspect-ratio: 3 / 4;
  transform: translateX(-50%);
  border-radius: 46% 46% 40% 40% / 34% 34% 62% 62%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.05));
}

html[data-platform="storyfuze"] .sf-mock-preview-caption {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  background: rgba(13, 20, 32, 0.84);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  white-space: nowrap;
  max-width: 92%;
  overflow: hidden;
  text-overflow: ellipsis;
}

html[data-platform="storyfuze"] .sf-mock-preview-time {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(13, 20, 32, 0.72);
  color: var(--fadeText);
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
}

html[data-platform="storyfuze"] .sf-mock-transcript-tag {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primaryColor);
  margin-bottom: 8px;
}

html[data-platform="storyfuze"] .sf-mock-transcript-line {
  font-size: 12px;
  line-height: 1.45;
  color: rgba(230, 237, 245, 0.88);
  padding: 4px 8px;
  margin: 0 0 4px;
  border-left: 2px solid transparent;
  border-radius: 4px;
}

html[data-platform="storyfuze"] .sf-mock-transcript-line--cut {
  color: var(--fadeText);
  text-decoration: line-through;
  opacity: 0.8;
}

html[data-platform="storyfuze"] .sf-mock-transcript-line--active {
  color: #fff;
  background: rgba(70, 224, 232, 0.12);
  border-left-color: var(--primaryColor);
}

/* --- Timeline cu clip-uri etichetate --- */
html[data-platform="storyfuze"] .sf-mock-timeline {
  position: relative;
  padding: 12px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

html[data-platform="storyfuze"] .sf-mock-ruler {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  color: var(--fadeText);
  opacity: 0.7;
}

html[data-platform="storyfuze"] .sf-mock-track {
  position: relative;
  height: 16px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.04);
}

html[data-platform="storyfuze"] .sf-mock-clip {
  position: absolute;
  top: 2px;
  bottom: 2px;
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(70, 224, 232, 0.6), rgba(70, 224, 232, 0.28));
  border: 1px solid rgba(70, 224, 232, 0.5);
}

html[data-platform="storyfuze"] .sf-mock-clip--b {
  background: linear-gradient(90deg, rgba(255, 122, 46, 0.6), rgba(255, 122, 46, 0.28));
  border-color: rgba(255, 122, 46, 0.5);
}

html[data-platform="storyfuze"] .sf-mock-track--caption { height: 11px; }

html[data-platform="storyfuze"] .sf-mock-clip--caption {
  background: rgba(244, 240, 232, 0.6);
  border-color: rgba(244, 240, 232, 0.75);
}

html[data-platform="storyfuze"] .sf-mock-track--audio { height: 11px; }

html[data-platform="storyfuze"] .sf-mock-audio {
  position: absolute;
  inset: 3px 6px;
  border-radius: 3px;
  background: repeating-linear-gradient(90deg, rgba(70, 224, 232, 0.45) 0 2px, transparent 2px 5px);
}

html[data-platform="storyfuze"] .sf-mock-playhead {
  position: absolute;
  top: 28px;
  bottom: 10px;
  width: 1px;
  background: var(--secondaryColor);
}

html[data-platform="storyfuze"] .sf-mock-playhead::before {
  content: "";
  position: absolute;
  top: -4px;
  left: -3px;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--secondaryColor);
}

/* --- Creative Studio: straturi cu valori + compoziție --- */
html[data-platform="storyfuze"] .sf-mock-layer-chip {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  margin-right: 8px;
  vertical-align: -2px;
  border: 1px solid rgba(255, 255, 255, 0.18);
}

html[data-platform="storyfuze"] .sf-mock-layer-chip--bg { background: linear-gradient(135deg, #1b2740, #0d1420); }
html[data-platform="storyfuze"] .sf-mock-layer-chip--logo { background: linear-gradient(135deg, #46e0e8, #ff7a2e); }
html[data-platform="storyfuze"] .sf-mock-layer-chip--head { background: #ff7a2e; }
html[data-platform="storyfuze"] .sf-mock-layer-chip--cta { background: #46e0e8; }

html[data-platform="storyfuze"] .sf-mock-comp-avatar {
  position: absolute;
  left: 12px;
  bottom: 14px;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(135deg, #ff7a2e, #ffb27a);
  box-shadow: 0 6px 16px -6px rgba(255, 122, 46, 0.6);
}

html[data-platform="storyfuze"] .sf-mock-comp-kicker {
  position: absolute;
  left: 12px;
  top: 12px;
  font-size: 9px;
  letter-spacing: 0.14em;
  font-weight: 700;
  color: #0d1420;
  background: var(--primaryColor);
  padding: 2px 7px;
  border-radius: 4px;
}

/* --- Publishing Hub: thumbnail-uri în coadă --- */
html[data-platform="storyfuze"] .sf-mock-queue-thumb {
  width: 28px;
  height: 22px;
  border-radius: 4px;
  flex: 0 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.16);
}

html[data-platform="storyfuze"] .sf-mock-queue-thumb--1 { background: linear-gradient(135deg, #46e0e8, #1b6f7a); }
html[data-platform="storyfuze"] .sf-mock-queue-thumb--2 { background: linear-gradient(135deg, #ff7a2e, #7a3a12); }
html[data-platform="storyfuze"] .sf-mock-queue-thumb--3 { background: linear-gradient(135deg, #6b8fb5, #22303f); }

/* Imagini reale în mockup-uri (revizuire 10.09.2026): frame video real în preview,
   thumbnail real pe canvas-ul creative, miniaturi reale în coada de publicare. */
html[data-platform="storyfuze"] .sf-mock-preview-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.92;
}

html[data-platform="storyfuze"] .sf-mock-comp-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

html[data-platform="storyfuze"] .sf-mock-comp-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 12, 20, 0.15) 0%, rgba(8, 12, 20, 0.72) 100%);
}

html[data-platform="storyfuze"] .sf-mock-queue-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}

html[data-platform="storyfuze"] .sf-mock-queue-thumb {
  overflow: hidden;
}

/* Cardul featured (Video Studio) se întinde pe 2 rânduri, dar conținutul mock-ului
   nu umplea spațiul → ~460px gol. Regula veche țintea .sf-mock-body (care nu mai
   există în varianta nouă) → o aplicăm pe .sf-mock-editor și lăsăm preview-ul să crească. */
@media (min-width: 860px) {
  html[data-platform="storyfuze"] .sf-feature--featured .sf-mock-editor {
    flex: 1 1 auto;
    min-height: 0;
    grid-template-rows: 1fr auto;
  }
  html[data-platform="storyfuze"] .sf-feature--featured .sf-mock-preview {
    aspect-ratio: auto;
    min-height: 240px;
  }
}

/* BUG de layout: .sf-eyebrow e inline-flex, iar .sf-section-title (h2) e inline-block
   → ambele sunt elemente inline și se așezau PE ACEEAȘI LINIE (eyebrow la stânga,
   titlul imediat după el, aliniat greșit). Le punem pe linii separate: eyebrow-ul
   din header-ele de secțiune devine block. */
html[data-platform="storyfuze"] .sf-section > .sf-container > .sf-eyebrow {
  display: block;
  margin-bottom: 10px;
}

/* Canvas-ul Creative: imaginea (position:absolute) acoperea headline-ul și CTA-ul
   (care erau în flux normal) → se vedea doar poza. Le punem deasupra și le așezăm
   peste imagine, în josul artboard-ului, ca într-un editor real. */
html[data-platform="storyfuze"] .sf-mock-canvas--comp {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 8px;
  padding: 16px;
  overflow: hidden;
}

html[data-platform="storyfuze"] .sf-mock-comp-img { z-index: 0; }
html[data-platform="storyfuze"] .sf-mock-comp-scrim { z-index: 1; }
html[data-platform="storyfuze"] .sf-mock-comp-kicker { z-index: 3; }

html[data-platform="storyfuze"] .sf-mock-canvas--comp > .sf-mock-comp-headline,
html[data-platform="storyfuze"] .sf-mock-canvas--comp > .sf-mock-comp-cta {
  position: relative;
  z-index: 3;
}

html[data-platform="storyfuze"] .sf-mock-canvas--comp > .sf-mock-comp-headline {
  font-size: 20px;
  line-height: 1.15;
  color: #fff;
}

/* Chips de format trunchiate ("16:9 thum…") în cardurile înguste → nu forțăm
   tăierea textului; lăsăm rândul să se împacheteze. */
html[data-platform="storyfuze"] .sf-mock-format-tab {
  white-space: nowrap;
}

html[data-platform="storyfuze"] .sf-mock-formats--block {
  flex-wrap: wrap;
}

/* Timeline video: aliniem playhead-ul cu timecode-ul din frame (00:24 pe o scală
   0:00–1:30 ≈ 27%) și adăugăm un transport vizibil, ca să nu pară ornament. */
html[data-platform="storyfuze"] .sf-mock-timeline::before {
  content: "\25B6";
  position: absolute;
  top: -2px;
  left: 14px;
  font-size: 9px;
  color: var(--primaryColor);
  opacity: 0.85;
}

/* ==========================================================================
   18. MODULE SCREENSHOTS REALE (revizuire 10.09.2026)
   Înlocuiesc mockup-urile CSS abstracte cu capturi reale din aplicație
   (cont demo populat). Cadru premium: ramă, glow duotone, umbră.
   ========================================================================== */

html[data-platform="storyfuze"] .sf-module-shot {
  position: relative;
  margin: 22px 0 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #0b1220;
  box-shadow: 0 20px 44px -22px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(70, 224, 232, 0.06);
}

html[data-platform="storyfuze"] .sf-module-shot::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 55%, rgba(8, 12, 20, 0.55) 100%);
}

html[data-platform="storyfuze"] .sf-module-shot img {
  display: block;
  width: 100%;
  height: auto;
}

/* Pe cardul featured (2 rânduri) imaginea poate crește ca să umple spațiul */
@media (min-width: 860px) {
  html[data-platform="storyfuze"] .sf-feature--featured {
    display: flex;
    flex-direction: column;
  }
  html[data-platform="storyfuze"] .sf-feature--featured .sf-module-shot {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
  }
  html[data-platform="storyfuze"] .sf-feature--featured .sf-module-shot img {
    height: 100%;
    object-fit: cover;
    object-position: top center;
  }
}

/* ==========================================================================
   19. FEATURES GRID UNIFORM (revizuire 10.09.2026)
   Cardul featured pe 2 rânduri dezechilibra rândul (înălțimi diferite).
   Trecut la grid uniform de 3 coloane; capturile primesc același aspect-ratio
   ca să se alinieze perfect.
   ========================================================================== */

@media (min-width: 1024px) {
  html[data-platform="storyfuze"] .sf-features-grid {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    align-items: stretch;
  }
  html[data-platform="storyfuze"] .sf-feature--featured {
    grid-row: auto;
  }
}

html[data-platform="storyfuze"] .sf-module-shot {
  margin-top: auto; /* împinge imaginea la baza cardului → capete aliniate */
}

html[data-platform="storyfuze"] .sf-module-shot {
  aspect-ratio: 16 / 10;
}

html[data-platform="storyfuze"] .sf-module-shot img {
  height: 100%;
  object-fit: cover;
  object-position: top left;
}

@media (min-width: 1024px) {
  html[data-platform="storyfuze"] .sf-feature--featured .sf-module-shot img {
    object-position: top left;
  }
}

/* CTA la finalul secțiunii features (altfel cititorul nu avea nicio ieșire în secțiune) */
html[data-platform="storyfuze"] .sf-section-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 40px;
}

/* ==========================================================================
   20. CTA + #how — corecții (revizuire 10.09.2026)
   ========================================================================== */

/* CTA: imaginea de fundal (cta-band.jpg) are o cusătură verticală vizibilă
   (~x=456/1600 din sursă) și e prea detaliata ca textul să fie lizibil.
   O estompăm printr-un strat blurat (același background) și întărim scrim-ul. */
html[data-platform="storyfuze"] .sf-cta::after {
  content: "";
  position: absolute;
  inset: -24px;
  background: inherit;
  background-size: cover;
  background-position: center;
  filter: blur(26px) saturate(0.9);
  z-index: 0;
  opacity: 0.9;
}

html[data-platform="storyfuze"] .sf-cta::before {
  z-index: 1;
  background:
    linear-gradient(100deg,
      rgba(70, 224, 232, 0.12) 0%,
      rgba(13, 20, 32, 0) 45%,
      rgba(255, 122, 46, 0.12) 100%),
    linear-gradient(90deg,
      rgba(9, 14, 24, 0.97) 0%,
      rgba(9, 14, 24, 0.9) 45%,
      rgba(9, 14, 24, 0.7) 75%,
      rgba(9, 14, 24, 0.55) 100%);
}

html[data-platform="storyfuze"] .sf-cta-content {
  position: relative;
  z-index: 2;
  max-width: 46ch;
}

html[data-platform="storyfuze"] .sf-cta .sf-hero-sub {
  text-wrap: balance;
}

html[data-platform="storyfuze"] .sf-cta .sf-hero-micro {
  color: rgba(255, 255, 255, 0.78);
}

/* #how: titlurile pașilor au număr de linii diferit (2/1/2/2) → paragrafele
   porneau de la înălțimi diferite. Rezervăm spațiu egal pentru zona de titlu. */
@media (min-width: 720px) {
  html[data-platform="storyfuze"] .sf-step .sf-h3 {
    min-height: 2.6em;
  }
}

html[data-platform="storyfuze"] .sf-step-n {
  margin-bottom: 14px;
}

/* CTA v2: imaginea trăiește doar pe stratul blurat (::after), fundalul de bază e
   navy solid. Astfel cusătura din sursă nu mai e vizibilă deloc (fără copie sharp). */
html[data-platform="storyfuze"] .sf-cta {
  background: #0a1017;
}

html[data-platform="storyfuze"] .sf-cta::after {
  inset: -40px;
  background-image: url("/assets/brand/storyfuze/img/public/cta-band.jpg");
  background-size: cover;
  background-position: center;
  /* Duotone guard: the source image carries violet/magenta tones; desaturate hard
     and let the ::before tint re-colour it into the brand palette only. */
  filter: blur(40px) saturate(0.15) contrast(1.05);
  opacity: 0.92;
}

/* ==========================================================================
   21. REVIZUIRE 10.09 — logo, nav hit-areas, pricing, FAQ, about
   ========================================================================== */

/* Logo nou (doar wordmark, fără tagline-ul ilizibil de 7px): aspect 958x172 = 5.57:1
   → la înălțime 36px lățimea reală e ~200px (înainte: 140px din cauza tagline-ului). */
html[data-platform="storyfuze"] nav.sf-nav img,
html[data-platform="storyfuze"] .sf-nav-brand img {
  height: 38px !important;
}

html[data-platform="storyfuze"] .sf-footer-brand-logo img {
  height: 30px;
}

/* Nav: hit-area minimă 44px pentru linkuri (erau ~22px) */
html[data-platform="storyfuze"] .sf-nav-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 2px;
}

/* Regula de mai sus (padding: 0 2px) se aplica și pe CTA-ul „Get started"
   (.sf-btn-fill), care e tot un <a> din .sf-nav-links → pilula rămânea fără
   respirație orizontală (2px). Restaurăm padding-ul de buton pentru el. */
html[data-platform="storyfuze"] .sf-nav-links a.sf-btn-fill {
  padding: 0 1.25rem;
}

/* Pricing: tag-ul de plan are 1 linie la Basic și 2 la Pro/Business → prețul
   și lista de features porneau de la înălțimi diferite. Rezervăm spațiu egal. */
@media (min-width: 860px) {
  html[data-platform="storyfuze"] .sf-plan-card .sf-card-body {
    min-height: 3.1em;
  }
}

/* Ancore: titlul secțiunii să nu rămână sub nav-ul sticky */
html[data-platform="storyfuze"] #hero,
html[data-platform="storyfuze"] #features,
html[data-platform="storyfuze"] #how,
html[data-platform="storyfuze"] #pricing,
html[data-platform="storyfuze"] #faq,
html[data-platform="storyfuze"] #cta,
html[data-platform="storyfuze"] #social-proof,
html[data-platform="storyfuze"] #testimonials {
  scroll-margin-top: 84px;
}

/* FAQ: rândul se întindea mult peste textul întrebării (spațiu gol mare).
   Limităm lățimea interioară și aliniem chevron-ul mai aproape de text. */
html[data-platform="storyfuze"] .sf-faq-item {
  max-width: 100%;
}

/* About: secțiunea "What makes StoryFuze different" are 4 carduri → grid 2x2
   (altfel al 4-lea rămânea orfan pe un rând de 1, cu 2 sloturi goale). */
@media (min-width: 860px) {
  html[data-platform="storyfuze"] .sf-features-grid--2col {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Ritm vertical unitar pe paginile publice (elimină benzile goale mari) */
html[data-platform="storyfuze"] .sf-section {
  padding: clamp(3.5rem, 6vw, 5.5rem) 0;
}

html[data-platform="storyfuze"] #about-hero + .sf-section,
html[data-platform="storyfuze"] #our-story {
  padding-top: clamp(2.5rem, 4vw, 4rem);
}

/* ==========================================================================
   22. MODULE ROWS — layout alternat (text + screenshot mare)
   La 3 coloane, capturile de 311px erau ilizibile (text UI ~4px). Rânduri
   alternate: copy pe o parte, screenshot mare (~560px) pe cealaltă.
   ========================================================================== */

html[data-platform="storyfuze"] .sf-module-rows {
  display: flex;
  flex-direction: column;
  gap: clamp(3rem, 6vw, 5rem);
  margin-top: 40px;
}

html[data-platform="storyfuze"] .sf-module-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: center;
}

@media (min-width: 900px) {
  html[data-platform="storyfuze"] .sf-module-row {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 56px;
  }
  html[data-platform="storyfuze"] .sf-module-row--flip .sf-module-copy {
    order: 2;
  }
  html[data-platform="storyfuze"] .sf-module-row--flip .sf-module-shot {
    order: 1;
  }
}

html[data-platform="storyfuze"] .sf-module-copy .sf-h3 {
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  margin: 6px 0 10px;
}

html[data-platform="storyfuze"] .sf-module-copy .sf-card-body {
  max-width: 46ch;
}

/* Screenshot mare: cadru premium, aspect natural (fără tăiere), glow duotone */
html[data-platform="storyfuze"] .sf-module-row .sf-module-shot {
  margin: 0;
  aspect-ratio: auto;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #0b1220;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(70, 224, 232, 0.05);
}

html[data-platform="storyfuze"] .sf-module-row .sf-module-shot img {
  height: auto;
  object-fit: contain;
  object-position: top center;
}

html[data-platform="storyfuze"] .sf-module-row .sf-module-shot::after {
  background: linear-gradient(180deg, transparent 70%, rgba(8, 12, 20, 0.4) 100%);
}

/* ==========================================================================
   23. FINALIZĂRI (revizuire 10.09.2026, runda 2)
   ========================================================================== */

/* --- FAQ: chevron orientat corect (jos = închis, sus = deschis) --- */
html[data-platform="storyfuze"] .sf-faq-item[open] .sf-faq-chevron {
  transform: rotate(180deg);
}

/* Chevron mai aproape de text (nu lipit de marginea din dreapta) + hit-area */
html[data-platform="storyfuze"] .sf-faq-item summary {
  justify-content: space-between;
  gap: 24px;
}

html[data-platform="storyfuze"] .sf-faq-chevron {
  color: var(--textColor);
  opacity: 0.85;
}

html[data-platform="storyfuze"] .sf-faq-item:hover .sf-faq-chevron,
html[data-platform="storyfuze"] .sf-faq-item[open] .sf-faq-chevron {
  color: var(--primaryColor);
  opacity: 1;
}

/* --- Pricing: toggle simetric (ambele opțiuni în pill-uri egale) --- */
html[data-platform="storyfuze"] .sf-billing-toggle {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--bordersColor);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
}

html[data-platform="storyfuze"] .sf-billing-toggle button {
  border: 0;
  background: transparent;
  color: var(--fadeText);
  border-radius: 999px;
  padding: 8px 20px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease;
}

html[data-platform="storyfuze"] .sf-billing-toggle button.is-active {
  background: var(--primaryColor);
  color: #0d1420;
}

/* --- CTA band: visual produs pe dreapta (înainte: jumătate goală) --- */
html[data-platform="storyfuze"] .sf-cta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
}

@media (min-width: 900px) {
  html[data-platform="storyfuze"] .sf-cta {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr);
    gap: 48px;
    padding: 56px 48px;
  }
}

html[data-platform="storyfuze"] .sf-cta-visual {
  position: relative;
  z-index: 2;
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 30px 60px -28px rgba(0, 0, 0, 0.95);
  max-height: 380px;
}

html[data-platform="storyfuze"] .sf-cta-visual img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 380px;
  object-fit: cover;
  object-position: top center;
}

/* Pe mobil: ascunde visualul (spațiu) */
@media (max-width: 899px) {
  html[data-platform="storyfuze"] .sf-cta-visual {
    display: none;
  }
}

/* --- Footer: consimțământ mai scurt (Privacy Policy rămânea duplicat) --- */

/* ==========================================================================
   24. ALINIERE FINĂ (revizuire 10.09.2026, runda 3)
   ========================================================================== */

/* Badge "Recommended": element absolut într-un flex-column → moștenea
   align-self:stretch și se întindea pe ~338px (cât cardul). Îl facem fit-content. */
html[data-platform="storyfuze"] .sf-plan-badge {
  align-self: flex-start;
  width: max-content;
  max-width: calc(100% - 48px);
}

/* FAQ: titlul secțiunii era la x=328, cardurile la x=360 (32px deplasare) fiindcă
   lista de 720px era centrată într-un container de 880px. Aliniem lista la container. */
html[data-platform="storyfuze"] #faq .sf-faq-list {
  max-width: 100%;
  margin-inline: 0;
}

html[data-platform="storyfuze"] #faq .sf-container {
  max-width: 920px;
}

/* CTA: fine print era cel mai mic ȘI cel mai șters text (ierarhie inversată) */
html[data-platform="storyfuze"] .sf-cta .sf-hero-micro {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.85);
}

html[data-platform="storyfuze"] .sf-cta .sf-hero-sub {
  color: rgba(255, 255, 255, 0.9);
}

/* ==========================================================================
   25. FOOTER v2 — 2 rânduri (revizuire 10.09.2026, runda 4)
   Înainte: 4 coloane + bandă newsletter full-width pe rând separat + bara de
   copyright plasată greșit într-o celulă de grid (w=324 în loc de full width).
   Acum: un rând de 4 coloane (brand mai lat), newsletter comprimat ÎN coloana
   de brand, copyright pe toată lățimea (grid-column: 1/-1).
   ========================================================================== */

html[data-platform="storyfuze"] .sf-footer-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px 32px;
  align-items: start;
}

@media (min-width: 1024px) {
  html[data-platform="storyfuze"] .sf-footer-grid {
    grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(0, 1fr));
    gap: 48px 40px;
  }
}

@media (max-width: 1023px) {
  html[data-platform="storyfuze"] .sf-footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  html[data-platform="storyfuze"] .sf-footer-grid {
    grid-template-columns: 1fr;
  }
}

/* Brand = coloana 1; newsletter-ul stă în interiorul ei (nu pe rând separat) */
html[data-platform="storyfuze"] .sf-footer-brand {
  grid-column: auto;
  gap: 14px;
}

html[data-platform="storyfuze"] .sf-footer-brand-logo {
  margin-bottom: 2px;
}

html[data-platform="storyfuze"] .sf-footer-brand-desc {
  margin: 0;
  color: var(--fadeText);
  font-size: 14px;
  line-height: 1.55;
  max-width: 34ch;
}

html[data-platform="storyfuze"] .sf-footer-social {
  margin-top: 2px;
}

/* Newsletter compact, în coloana de brand */
html[data-platform="storyfuze"] .sf-footer-newsletter {
  grid-column: auto;
  display: block;
  border-top: 1px solid var(--bordersColor);
  margin-top: 8px;
  padding-top: 18px;
}

html[data-platform="storyfuze"] .sf-footer-newsletter .sf-footer-col-title {
  margin-bottom: 10px;
}

html[data-platform="storyfuze"] .sf-newsletter-form {
  display: flex;
  gap: 8px;
  margin: 0;
  max-width: 100%;
}

html[data-platform="storyfuze"] .sf-newsletter-form .sf-input {
  flex: 1 1 auto;
  min-width: 0;
}

/* The shared .sf-input surface (#1b232e) sits on a #0d1420 footer and reads as
   invisible — give the footer field its own clearly visible surface. */
html[data-platform="storyfuze"] .sf-footer-newsletter .sf-newsletter-form .sf-input {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.30);
}

html[data-platform="storyfuze"] .sf-footer-newsletter .sf-newsletter-form .sf-input::placeholder {
  color: rgba(226, 237, 245, 0.62);
}

/* Mobile: stack the field above the button so the row never overflows the column. */
@media (max-width: 560px) {
  html[data-platform="storyfuze"] .sf-footer-newsletter .sf-newsletter-form {
    flex-direction: column;
    align-items: stretch;
  }
  html[data-platform="storyfuze"] .sf-footer-newsletter .sf-newsletter-form .sf-btn-fill {
    width: 100%;
  }
}

html[data-platform="storyfuze"] .sf-footer-note {
  margin: 10px 0 0;
  color: var(--fadeText);
  font-size: 12.5px;
  line-height: 1.5;
}

/* Bara de copyright: pe toată lățimea, aliniată stânga/dreapta */
html[data-platform="storyfuze"] .sf-footer-bottom {
  grid-column: 1 / -1;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
  padding-top: 22px;
  border-top: 1px solid var(--bordersColor);
}

html[data-platform="storyfuze"] .sf-footer-bottom-note {
  color: var(--fadeText);
  font-size: 12.5px;
}

/* Logo footer: logo complet (958x246) */
html[data-platform="storyfuze"] .sf-footer-brand-logo img {
  height: 34px;
  width: auto;
  max-width: none;
}

/* Logo nav: logo complet (958x246 → aspect 3.89). La 46px înălțime => ~179px lat,
   complet lizibil (fără tăiere, cu tagline). */
html[data-platform="storyfuze"] nav.sf-nav img,
html[data-platform="storyfuze"] .sf-nav-brand img {
  height: 46px !important;
}

@media (max-width: 860px) {
  html[data-platform="storyfuze"] nav.sf-nav img,
  html[data-platform="storyfuze"] .sf-nav-brand img {
    height: 38px !important;
  }
}

/* Hero: captură reală de produs (înlocuiește mockup-ul CSS).
   Fără CSS, imaginea se întindea la înălțimea naturală pe o coloană îngustă
   (aspect distorsionat). O limităm corect + cadru premium + glow. */
html[data-platform="storyfuze"] .sf-hero-shot {
  position: relative;
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(70, 224, 232, 0.06);
  background: #0b1220;
}

html[data-platform="storyfuze"] .sf-hero-shot img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 460px;
  object-fit: cover;
  object-position: top center;
}

@media (max-width: 899px) {
  html[data-platform="storyfuze"] .sf-hero-shot img {
    max-height: none;
  }
}

/* Glow duotone în spatele capturii din hero */
html[data-platform="storyfuze"] .sf-hero-shot::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(200deg, rgba(70, 224, 232, 0.10) 0%, transparent 40%, transparent 65%, rgba(255, 122, 46, 0.10) 100%);
}

/* ==========================================================================
   26. HERO v2 — text sus + screenshot full-width dedesubt
   La 581px lățime, textul din captură era ilizibil (~7px). Layout clasic
   modern: copy pe toată lățimea (măsură de citire), apoi captura de produs
   mare (container ~1184px) → UI-ul devine lizibil.
   ========================================================================== */

html[data-platform="storyfuze"] .sf-hero-split {
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: start;
}

html[data-platform="storyfuze"] .sf-hero-copy {
  max-width: 62ch;
}

html[data-platform="storyfuze"] .sf-h1 {
  max-width: 22ch;
}

html[data-platform="storyfuze"] .sf-hero-shot {
  width: 100%;
}

html[data-platform="storyfuze"] .sf-hero-shot img {
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
}

@media (min-width: 900px) {
  html[data-platform="storyfuze"] .sf-hero-split {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}

/* CTA v3: revine la banda cu imagine de fundal (fără visual lateral — la 360px
   era ilizibil). Single column, copy limitat la măsură de citire, scrim puternic. */
html[data-platform="storyfuze"] .sf-cta {
  display: block;
  padding: 64px 48px;
}

@media (max-width: 899px) {
  html[data-platform="storyfuze"] .sf-cta {
    padding: 48px 28px;
  }
}

html[data-platform="storyfuze"] .sf-cta .sf-cta-content {
  max-width: 52ch;
}

/* Imaginea de fundal: blur moderat (ascunde cusătura din sursă) + scrim de contrast.
   Scrim-ul moștenit (0.96/0.88/0.68, + opacity:1 + blur 26px din regulile v2 mai
   sus) lăsa imaginea practic invizibilă — banda arăta ca un dreptunghi negru gol
   deasupra footerului. Scădem opacitatea scrim-ului și blur-ul ca fotografia
   (timeline de montaj video) să rămână vizibilă, cu text tot lizibil în stânga. */
html[data-platform="storyfuze"] .sf-cta::after {
  inset: -30px;
  filter: blur(14px) saturate(1.05);
  opacity: 0.8;
}

html[data-platform="storyfuze"] .sf-cta::before {
  background: linear-gradient(100deg,
    rgba(9, 14, 24, 0.9) 0%,
    rgba(9, 14, 24, 0.72) 45%,
    rgba(9, 14, 24, 0.38) 100%);
}

/* ==========================================================================
   27. HERO v3 — text centrat + captură full-width dedesubt
   Textul aliniat stânga pe toată lățimea lăsa jumătatea dreaptă sus goală
   (arăta ca o imagine lipsă). Trecut pe hero centrat (pattern modern):
   eyebrow/H1/sub/CTA centrate, captura de produs dedesubt pe toată lățimea.
   ========================================================================== */

html[data-platform="storyfuze"] .sf-hero-split {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}

html[data-platform="storyfuze"] .sf-hero-copy {
  max-width: 780px;
  margin-inline: auto;
  text-align: center;
}

html[data-platform="storyfuze"] .sf-hero-copy .sf-eyebrow {
  justify-content: center;
}

html[data-platform="storyfuze"] .sf-h1 {
  max-width: 24ch;
  margin-inline: auto;
}

html[data-platform="storyfuze"] .sf-hero-copy .sf-hero-sub {
  margin-inline: auto;
  max-width: 56ch;
}

html[data-platform="storyfuze"] .sf-hero-copy .d-flex {
  justify-content: center;
}

html[data-platform="storyfuze"] .sf-hero-glow {
  left: 50%;
  top: -10%;
  transform: translateX(-50%);
  width: 900px;
  height: 620px;
}

html[data-platform="storyfuze"] .sf-hero-shot {
  width: 100%;
  max-width: 1184px;
}

@media (max-width: 899px) {
  html[data-platform="storyfuze"] .sf-hero-copy {
    text-align: left;
  }
  html[data-platform="storyfuze"] .sf-hero-copy .sf-eyebrow,
  html[data-platform="storyfuze"] .sf-hero-copy .d-flex {
    justify-content: flex-start;
  }
  html[data-platform="storyfuze"] .sf-h1 {
    margin-inline: 0;
  }
}

/* ==========================================================================
   28. HERO + MODULE SHOTS — real photography (revision 2)
   CSS-mockup panels were tried here first; the brief asked for representative
   stock photography instead, so hero-shot/module-shot are back to plain
   <img> — framed by the existing .sf-hero-shot/.sf-module-shot borders — with
   curated Unsplash photos that carry no competitor UI/branding.
   ========================================================================== */

/* The creative/publishing photos are bright, near-white stock shots — a flat
   dark vignette keeps them from reading as a stark cutout against the page. */
html[data-platform="storyfuze"] .sf-module-shot::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  box-shadow: inset 0 0 40px 10px rgba(8, 12, 20, 0.35);
}

/* ==========================================================================
   29. HERO REDESIGN — smaller floating shot + scroll parallax
   The hero photo at full container width (1184px) read as oversized relative
   to the copy above it. Shrunk to a centred "floating card" with its own
   glow/shadow, plus a restrained scroll-linked parallax (JS sets
   --sf-parallax-y on [data-parallax] elements — see storyfuze-public.js §8).
   Every parallax rule below only ever moves opacity-safe transforms and is
   skipped outright under prefers-reduced-motion (JS never attaches the
   scroll listener, so --sf-parallax-y stays at its 0px default).
   ========================================================================== */

html[data-platform="storyfuze"] .sf-hero-shot {
  max-width: 780px;
  margin-top: 12px;
  transition: box-shadow 480ms var(--sf-ease-out, ease);
}

html[data-platform="storyfuze"] .sf-hero-shot:hover {
  box-shadow: 0 48px 90px -36px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(70, 224, 232, 0.1);
}

/* Ambient glow sized to the smaller card, sits a touch behind/above it. */
html[data-platform="storyfuze"] .sf-hero-glow {
  width: 640px;
  height: 460px;
  top: 4%;
}

@media (max-width: 899px) {
  html[data-platform="storyfuze"] .sf-hero-shot {
    max-width: 100%;
  }
}

/* Parallax lives on the photo itself, not the bordered card — the card
   (and its shadow/border) stays put; the image drifts a few px inside its
   frame, clipped by the card's own overflow:hidden. Also drives the CTA
   band photo (.sf-cta::after inherits --sf-parallax-y from its parent,
   which carries [data-parallax]). */
html[data-platform="storyfuze"] .sf-hero-shot img,
html[data-platform="storyfuze"] .sf-module-shot img,
html[data-platform="storyfuze"] .sf-cta::after {
  transform: translateY(var(--sf-parallax-y, 0px));
  transition: transform 120ms linear;
}

@media (prefers-reduced-motion: reduce) {
  html[data-platform="storyfuze"] .sf-hero-shot img,
  html[data-platform="storyfuze"] .sf-module-shot img,
  html[data-platform="storyfuze"] .sf-cta::after,
  html[data-platform="storyfuze"] .sf-hero-shot {
    transition: none !important;
  }
}

/* ==========================================================================
   30. HERO — side-by-side on desktop + always-on motion (revision 3)
   Two things the last pass got wrong: the shot sat in its own centred row
   below the copy instead of beside it, and the only motion was a scroll-
   linked parallax of a few px — easy to miss entirely if you don't scroll
   exactly past the hero. This adds motion that's visible immediately, with
   no scroll or hover required: a slow continuous float on the shot and an
   ambient drift/pulse on the glow behind it. Scroll parallax (§29) still
   layers on top for the shot's <img> (drifts inside its frame).
   ========================================================================== */

@media (min-width: 900px) {
  html[data-platform="storyfuze"] .sf-hero-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 56px;
    text-align: left;
  }

  html[data-platform="storyfuze"] .sf-hero-copy {
    max-width: 100%;
    margin-inline: 0;
    text-align: left;
  }

  html[data-platform="storyfuze"] .sf-hero-copy .sf-eyebrow,
  html[data-platform="storyfuze"] .sf-hero-copy .d-flex {
    justify-content: flex-start;
  }

  html[data-platform="storyfuze"] .sf-h1,
  html[data-platform="storyfuze"] .sf-hero-copy .sf-hero-sub {
    max-width: 44ch;
    margin-inline: 0;
  }

  html[data-platform="storyfuze"] .sf-hero-shot {
    max-width: 100%;
    margin-top: 0;
  }

  /* Glow sits behind the shot's column, not centred on the whole row. */
  html[data-platform="storyfuze"] .sf-hero-glow {
    left: auto;
    right: 6%;
    transform: none;
  }
}

/* Continuous float — the shot itself drifts a few px, independent of the
   scroll-parallax on its <img> (separate elements, transforms compose). */
@keyframes sf-hero-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-14px);
  }
}

html[data-platform="storyfuze"] .sf-hero-shot {
  animation: sf-hero-float 7s ease-in-out infinite;
}

/* Ambient glow: slow opacity/scale breathing, no JS involved. Replaces the
   scroll-parallax that used to drive this element (§29) — a decorative
   blob reads better with a self-contained loop than a scroll tie-in. */
@keyframes sf-glow-drift {
  0%,
  100% {
    opacity: 0.75;
    transform: translateX(-50%) scale(1);
  }
  50% {
    opacity: 1;
    transform: translateX(-50%) scale(1.08);
  }
}

@media (min-width: 900px) {
  @keyframes sf-glow-drift {
    0%,
    100% {
      opacity: 0.75;
      transform: scale(1);
    }
    50% {
      opacity: 1;
      transform: scale(1.08);
    }
  }
}

html[data-platform="storyfuze"] .sf-hero-glow {
  animation: sf-glow-drift 9s ease-in-out infinite;
}

/* Module shots: lift + brighten border on hover/focus — the one motion on
   the page that responds directly to the visitor rather than to scroll. */
html[data-platform="storyfuze"] .sf-module-shot {
  transition: transform 320ms var(--sf-ease-out, ease), box-shadow 320ms var(--sf-ease-out, ease),
    border-color 320ms var(--sf-ease-out, ease);
}

html[data-platform="storyfuze"] .sf-module-shot:hover,
html[data-platform="storyfuze"] .sf-module-shot:focus-within {
  transform: translateY(-6px) scale(1.015);
  border-color: rgba(70, 224, 232, 0.35);
  box-shadow: 0 30px 60px -26px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(70, 224, 232, 0.12);
}

@media (prefers-reduced-motion: reduce) {
  html[data-platform="storyfuze"] .sf-hero-shot,
  html[data-platform="storyfuze"] .sf-hero-glow {
    animation: none !important;
  }
  html[data-platform="storyfuze"] .sf-hero-glow {
    transform: translateX(-50%);
  }
  @media (min-width: 900px) {
    html[data-platform="storyfuze"] .sf-hero-glow {
      transform: none;
    }
  }
  html[data-platform="storyfuze"] .sf-module-shot {
    transition: none !important;
  }
  html[data-platform="storyfuze"] .sf-module-shot:hover,
  html[data-platform="storyfuze"] .sf-module-shot:focus-within {
    transform: none;
  }
}

/* The CTA band keeps its dark scrim in both themes (v2/v3 above). In light mode
   the page supplies --textColor #1f2937, so its headings rendered dark-on-dark
   (measured contrast 1.30 on /about). Force the on-dark copy inside the band. */
html[data-platform="storyfuze"][data-theme="light"] .sf-cta .sf-h2,
html[data-platform="storyfuze"][data-theme="light"] .sf-cta h1,
html[data-platform="storyfuze"][data-theme="light"] .sf-cta h2,
html[data-platform="storyfuze"][data-theme="light"] .sf-cta h3,
html[data-platform="storyfuze"][data-theme="light"] .sf-cta .sf-hero-sub {
  color: rgba(255, 255, 255, 0.94);
}

/* The global `a:hover { color: var(--secondaryColor) !important }`
   (assets/brand/ifindspec/css/private/01-base-common.css) repaints filled-button
   anchors orange — orange label on orange pill (invisible CTA). Re-assert the
   navy label for every filled button on the public site, normal + hover + focus. */
html[data-platform="storyfuze"] a.sf-btn-fill,
html[data-platform="storyfuze"] a.sf-btn-fill:hover,
html[data-platform="storyfuze"] a.sf-btn-fill:focus-visible {
  color: var(--pageBackgroundColor, #0d1420) !important;
}