// VARIANT 1 — CINEMATIC DARK
// Edel, dunkel, blau-akzentuiert. Großes Hero-Video, editorial Typo.
function VariantCinematic() {
  const fk = window.FK7;
  const videoRef = React.useRef(null);
  const [modalProject, setModalProject] = React.useState(null);

  React.useEffect(() => {
    if (videoRef.current) {
      videoRef.current.play().catch(() => {});
    }
  }, []);

  const blue = "#3d8bff";

  return (
    <div style={cineStyles.root}>
      <style>{`
        .cine-marquee-track { animation: cine-scroll 60s linear infinite; }
        @keyframes cine-scroll { from{transform:translateX(0)} to{transform:translateX(-50%)} }
        .cine-tile:hover .cine-tile-img { transform: scale(1.05); }
        .cine-tile .cine-tile-img { transition: transform 800ms cubic-bezier(.2,.7,.2,1); }
        .cine-tile-playable { cursor: pointer; }
        .cine-tile-playable:hover .cine-play-icon { opacity: 1; transform: translate(-50%,-50%) scale(1); }
        .cine-play-icon {
          opacity: 0; transition: opacity 300ms ease, transform 300ms ease;
          position: absolute; left: 50%; top: 50%;
          transform: translate(-50%,-50%) scale(0.85);
          width: 64px; height: 64px; border-radius: 999px;
          background: rgba(255,255,255,0.95); color: #0a0a0a;
          display: flex; align-items: center; justify-content: center;
          font-size: 22px; pointer-events: none; z-index: 3;
          box-shadow: 0 8px 32px rgba(0,0,0,0.4);
        }
        .cine-faq-item summary { list-style: none; cursor: pointer; }
        .cine-faq-item summary::-webkit-details-marker { display: none; }
        .cine-faq-item[open] .cine-faq-plus { transform: rotate(45deg); }
        .cine-faq-plus { transition: transform 300ms ease; }
        .cine-link-arrow { transition: transform 200ms ease; display: inline-block; }
        .cine-link:hover .cine-link-arrow { transform: translateX(4px); }
        .cine-grain::before {
          content:""; position:absolute; inset:0; pointer-events:none;
          background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>");
          opacity: 0.08; mix-blend-mode: overlay;
        }
        @keyframes cine-fade-in { from { opacity: 0 } to { opacity: 1 } }
        @keyframes cine-modal-in { from { opacity: 0; transform: scale(0.96) } to { opacity: 1; transform: scale(1) } }
        .cine-modal-overlay { animation: cine-fade-in 200ms ease-out; }
        .cine-modal-content { animation: cine-modal-in 280ms cubic-bezier(.2,.8,.2,1); }
        .cine-modal-close:hover { background: rgba(255,255,255,0.2) !important; transform: scale(1.05); }
        .cine-modal-close { transition: background 200ms ease, transform 200ms ease; }
      `}</style>

      {/* TOP NAV */}
      <nav style={cineStyles.nav}>
        <div style={cineStyles.navInner}>
          <a href="#top" style={{display:"flex", alignItems:"center", gap:10}}>
            <img src={fk.brand.logoDark} alt="FK7 Media" style={{height: 26, width:"auto"}} />
          </a>
          <div style={cineStyles.navLinks}>
            <a href="#work" style={cineStyles.navLink}>Arbeiten</a>
            <a href="#services" style={cineStyles.navLink}>Leistungen</a>
            <a href="#team" style={cineStyles.navLink}>Team</a>
            <a href="#faq" style={cineStyles.navLink}>FAQ</a>
          </div>
          <a href="#contact" style={{...cineStyles.btnPrimary, background: blue}}>
            Anfrage senden
            <span>↗</span>
          </a>
        </div>
      </nav>

      {/* HERO */}
      <section id="top" style={cineStyles.hero}>
        <div className="cine-grain" style={cineStyles.heroVideo}>
          <video
            ref={videoRef}
            src={fk.brand.video}
            autoPlay muted loop playsInline
            style={{width: "100%", height: "100%", objectFit: "cover", filter: "brightness(0.55) contrast(1.05)"}}
          />
        </div>
        <div style={cineStyles.heroGradient} />

        <div style={cineStyles.heroContent}>
          <div style={cineStyles.heroMeta}>
            <span style={{...cineStyles.dot, background: blue}} className="pulse" />
            <span style={cineStyles.mono}>Live · Bielefeld · 2026</span>
          </div>
          <h1 style={cineStyles.heroHeadline}>
            Content, der dein<br/>
            Restaurant <span style={{...cineStyles.serifI, color: blue}}>füllt</span>.
          </h1>
          <p style={cineStyles.heroSub}>
            Wir sind FK7 — ein zweiköpfiges Team für Videografie,
            Fotografie und Social Media aus Bielefeld. Spezialisiert auf
            Gastronomie. Schnell, fair, persönlich.
          </p>
          <div style={cineStyles.heroCtas}>
            <a href="#contact" style={{...cineStyles.btnPrimary, background: blue, fontSize: 16, padding: "18px 28px"}}>
              Projekt starten
              <span>↗</span>
            </a>
            <a href="#work" style={cineStyles.btnGhost}>
              Showreel ansehen
              <span style={{fontSize: 12}}>▶</span>
            </a>
          </div>

          <div style={cineStyles.heroStats}>
            {[
              { k: "5–7", v: "Werktage Lieferung" },
              { k: "200+", v: "Reels veröffentlicht" },
              { k: "8", v: "Gastro-Kunden" },
              { k: "OWL", v: "Lokal vor Ort" },
            ].map((s, i) => (
              <div key={i} style={cineStyles.statBlock}>
                <div style={cineStyles.statK}>{s.k}</div>
                <div style={cineStyles.statV}>{s.v}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* LOGO MARQUEE */}
      {fk.logoWall.length > 0 && (
        <section style={cineStyles.marquee}>
          <div style={cineStyles.marqueeLabel}>
            <span style={cineStyles.mono}>Bereits zusammengearbeitet mit</span>
          </div>
          <div style={{overflow:"hidden", position:"relative"}}>
            <div className="cine-marquee-track" style={{display:"flex", gap: 48, width: "max-content"}}>
              {[...fk.logoWall, ...fk.logoWall].map((c, i) => (
                <span key={i} style={cineStyles.marqueeItem}>{c}</span>
              ))}
            </div>
          </div>
        </section>
      )}

      {/* WORK / SHOWREEL */}
      <section id="work" style={cineStyles.section}>
        <header style={cineStyles.sectionHeader}>
          <div>
            <span style={cineStyles.mono}>·· 01 / WORK</span>
            <h2 style={cineStyles.h2}>Ausgewählte Arbeiten,<br/>frisch aus der Timeline.</h2>
          </div>
          <a href="#contact" style={cineStyles.linkArrow} className="cine-link">
            Eigenes Projekt? <span className="cine-link-arrow">→</span>
          </a>
        </header>

        {/* Bento Grid: 4 cols × 2 rows. Sizes total 8 cells, 6 tiles. */}
        <div style={cineStyles.bento}>
          <ProjectTile size="wide"   p={fk.projects[0]} accent={blue} onOpen={setModalProject} />
          <ProjectTile size="tall"   p={fk.projects[1]} accent={blue} onOpen={setModalProject} />
          <ProjectTile size="square" p={fk.projects[2]} accent={blue} onOpen={setModalProject} />
          <ProjectTile size="square" p={fk.projects[3]} accent={blue} onOpen={setModalProject} />
          <ProjectTile size="square" p={fk.projects[4]} accent={blue} onOpen={setModalProject} />
          <ProjectTile size="square" p={fk.projects[5]} accent={blue} onOpen={setModalProject} />
        </div>
      </section>

      {/* SERVICES */}
      <section id="services" style={{...cineStyles.section, background: "#0f0f0f", padding: "120px 80px"}}>
        <header style={cineStyles.sectionHeader}>
          <div>
            <span style={cineStyles.mono}>·· 02 / LEISTUNGEN</span>
            <h2 style={cineStyles.h2}>Alles was du<br/>von uns kriegen kannst.</h2>
          </div>
          <p style={cineStyles.sectionLead}>
            Fünf Bausteine. Kombinierbar wie ein Menu. Du nimmst, was du brauchst —
            wir machen den Rest.
          </p>
        </header>

        <div style={cineStyles.servicesGrid}>
          {fk.services.map((s, i) => (
            <article key={s.id} style={cineStyles.serviceCard}>
              <div style={{display:"flex", justifyContent:"space-between", alignItems:"baseline", marginBottom: 24}}>
                <span style={{...cineStyles.mono, color: blue}}>0{i+1}</span>
                <span style={cineStyles.mono}>{s.short}</span>
              </div>
              <h3 style={cineStyles.serviceTitle}>{s.title}</h3>
              <p style={cineStyles.serviceDesc}>{s.desc}</p>
              <ul style={cineStyles.serviceList}>
                {s.points.map(p => (
                  <li key={p} style={cineStyles.serviceListItem}>
                    <span style={{color: blue, marginRight: 8}}>·</span>{p}
                  </li>
                ))}
              </ul>
            </article>
          ))}
        </div>
      </section>

      {/* USPs */}
      <section style={{...cineStyles.section, padding: "140px 80px"}}>
        <div style={cineStyles.uspIntro}>
          <span style={cineStyles.mono}>·· 03 / WARUM WIR</span>
          <h2 style={{...cineStyles.h2, maxWidth: 900}}>
            Klein, lokal, schnell — und ehrlich gesagt,{" "}
            <span style={{...cineStyles.serifI, color: blue}}>günstiger</span> als die anderen.
          </h2>
        </div>
        <div style={cineStyles.uspGrid}>
          {fk.usps.map(u => (
            <div key={u.num} style={cineStyles.uspItem}>
              <div style={{...cineStyles.uspNum, color: blue}}>{u.num}</div>
              <h3 style={cineStyles.uspTitle}>{u.title}</h3>
              <p style={cineStyles.uspBody}>{u.body}</p>
            </div>
          ))}
        </div>
      </section>

      {/* PROCESS */}
      <section style={{...cineStyles.section, background: "#0f0f0f", padding: "120px 80px"}}>
        <header style={cineStyles.sectionHeader}>
          <div>
            <span style={cineStyles.mono}>·· 04 / ABLAUF</span>
            <h2 style={cineStyles.h2}>Vom ersten Hi<br/>bis zum fertigen Reel.</h2>
          </div>
        </header>
        <div style={cineStyles.processRow}>
          {fk.process.map((p, i) => (
            <div key={p.n} style={cineStyles.processStep}>
              <div style={{...cineStyles.processNum, color: blue}}>{p.n}</div>
              <h3 style={cineStyles.processTitle}>{p.title}</h3>
              <p style={cineStyles.processBody}>{p.body}</p>
              {i < fk.process.length - 1 && <div style={cineStyles.processConnector} />}
            </div>
          ))}
        </div>
      </section>

      {/* TEAM */}
      <section id="team" style={{...cineStyles.section, padding: "140px 80px"}}>
        <header style={cineStyles.sectionHeader}>
          <div>
            <span style={cineStyles.mono}>·· 05 / TEAM</span>
            <h2 style={cineStyles.h2}>Zwei Köpfe.<br/>Kein Overhead.</h2>
          </div>
          <p style={cineStyles.sectionLead}>
            Du redest direkt mit denen, die drehen, schneiden und liefern.
            Kein Account-Manager dazwischen.
          </p>
        </header>
        <div style={cineStyles.teamGrid}>
          {fk.team.map((m, i) => (
            <article key={m.name} style={cineStyles.teamCard}>
              <div style={cineStyles.teamPortrait}>
                {m.photo ? (
                  <img
                    src={m.photo}
                    alt={`${m.name} — Founder`}
                    style={{width: "100%", height: "100%", objectFit: "cover", display: "block"}}
                    onError={(e) => {
                      // Falls Bild fehlt: zurück zum Platzhalter
                      e.currentTarget.style.display = "none";
                      e.currentTarget.nextSibling.style.display = "flex";
                    }}
                  />
                ) : null}
                <div
                  style={{
                    ...cineStyles.portraitPlaceholder,
                    background: i === 0 ? "#1a1f2e" : "#1e1a18",
                    display: m.photo ? "none" : "flex",
                  }}
                >
                  <span style={cineStyles.portraitInitial}>{m.name[0]}</span>
                  <span style={{...cineStyles.mono, position:"absolute", bottom: 20, left: 24, color: "rgba(255,255,255,0.4)"}}>
                    Portrait · {m.name}
                  </span>
                </div>
              </div>
              <div style={{padding: "32px 4px 0"}}>
                <div style={{display:"flex", alignItems:"baseline", gap: 16, marginBottom: 8}}>
                  <h3 style={cineStyles.teamName}>{m.name}</h3>
                  <span style={{...cineStyles.mono, color: "rgba(255,255,255,0.4)"}}>{m.age} JAHRE · {m.role.toUpperCase()}</span>
                </div>
                <p style={cineStyles.teamBio}>{m.bio}</p>
                <div style={cineStyles.skillRow}>
                  {m.skills.map(sk => (
                    <span key={sk} style={cineStyles.skillChip}>{sk}</span>
                  ))}
                </div>
              </div>
            </article>
          ))}
        </div>
      </section>

      {/* TESTIMONIALS */}
      {fk.testimonials.length > 0 && (
        <section style={{...cineStyles.section, background: "#0f0f0f", padding: "120px 80px"}}>
          <header style={cineStyles.sectionHeader}>
            <div>
              <span style={cineStyles.mono}>·· 06 / STIMMEN</span>
              <h2 style={cineStyles.h2}>Was unsere<br/>Kunden sagen.</h2>
            </div>
          </header>
          <div style={cineStyles.testimonialsRow}>
            {fk.testimonials.map((t, i) => (
              <blockquote key={i} style={cineStyles.testimonial}>
                <div style={{...cineStyles.quoteMark, color: blue}}>"</div>
                <p style={cineStyles.testimonialQuote}>{t.quote}</p>
                <footer style={cineStyles.testimonialFooter}>
                  <div style={{fontWeight: 500}}>{t.author}</div>
                  <div style={{color: "rgba(255,255,255,0.5)", fontSize: 13}}>{t.role} · {t.company}</div>
                </footer>
              </blockquote>
            ))}
          </div>
        </section>
      )}

      {/* FAQ */}
      <section id="faq" style={{...cineStyles.section, padding: "140px 80px"}}>
        <header style={cineStyles.sectionHeader}>
          <div>
            <span style={cineStyles.mono}>·· 07 / FAQ</span>
            <h2 style={cineStyles.h2}>Häufige Fragen,<br/>klare Antworten.</h2>
          </div>
        </header>
        <div style={cineStyles.faqList}>
          {fk.faq.map((item, i) => (
            <details key={i} className="cine-faq-item" style={cineStyles.faqItem} open={i === 0}>
              <summary style={cineStyles.faqSummary}>
                <span style={{...cineStyles.mono, color: "rgba(255,255,255,0.4)", width: 40}}>0{i+1}</span>
                <span style={cineStyles.faqQ}>{item.q}</span>
                <span className="cine-faq-plus" style={{...cineStyles.faqPlus, color: blue}}>+</span>
              </summary>
              <div style={cineStyles.faqA}>{item.a}</div>
            </details>
          ))}
        </div>
      </section>

      {/* CONTACT */}
      <section id="contact" style={{...cineStyles.section, background: "#0f0f0f", padding: "140px 80px 80px"}}>
        <div style={cineStyles.contactGrid}>
          <div>
            <span style={cineStyles.mono}>·· 08 / KONTAKT</span>
            <h2 style={{...cineStyles.h2, maxWidth: 520}}>
              Lass uns über dein<br/>nächstes <span style={{...cineStyles.serifI, color: blue}}>Reel</span> sprechen.
            </h2>
            <p style={{...cineStyles.sectionLead, marginTop: 32, maxWidth: 480}}>
              Schreib uns kurz, was du brauchst. Wir melden uns innerhalb
              von 24 Stunden mit einem ersten Vorschlag.
            </p>
            <div style={cineStyles.contactMeta}>
              <div>
                <div style={{...cineStyles.mono, color: "rgba(255,255,255,0.4)", marginBottom: 6}}>E-MAIL</div>
                <a href={`mailto:${fk.brand.email}`} style={{...cineStyles.contactValue, color: blue}}>{fk.brand.email}</a>
              </div>
              <div>
                <div style={{...cineStyles.mono, color: "rgba(255,255,255,0.4)", marginBottom: 6}}>STANDORT</div>
                <div style={cineStyles.contactValue}>Bielefeld, OWL</div>
              </div>
              <div>
                <div style={{...cineStyles.mono, color: "rgba(255,255,255,0.4)", marginBottom: 6}}>ANTWORT</div>
                <div style={cineStyles.contactValue}>{"< 24h"}</div>
              </div>
            </div>
          </div>

          <form style={cineStyles.form} onSubmit={(e) => { e.preventDefault(); alert("Nachricht gesendet (Demo)"); }}>
            <div style={cineStyles.formField}>
              <label style={cineStyles.formLabel}>Name</label>
              <input style={cineStyles.formInput} placeholder="Wie heißt du?" />
            </div>
            <div style={cineStyles.formField}>
              <label style={cineStyles.formLabel}>E-Mail</label>
              <input style={cineStyles.formInput} type="email" placeholder="du@deinrestaurant.de" />
            </div>
            <div style={cineStyles.formField}>
              <label style={cineStyles.formLabel}>Restaurant / Projekt</label>
              <input style={cineStyles.formInput} placeholder="Name & Standort" />
            </div>
            <div style={cineStyles.formField}>
              <label style={cineStyles.formLabel}>Worum geht's?</label>
              <textarea style={{...cineStyles.formInput, minHeight: 120, resize: "vertical"}} placeholder="Reels? Imagefilm? Komplette Betreuung? Erzähl uns kurz." />
            </div>
            <button type="submit" style={{...cineStyles.btnPrimary, background: blue, width: "100%", justifyContent:"center", padding: "20px", fontSize: 16}}>
              Anfrage senden
              <span>↗</span>
            </button>
            <p style={{...cineStyles.mono, color: "rgba(255,255,255,0.4)", marginTop: 8, fontSize: 10}}>
              Mit Absenden bestätigst du, dass wir dir per E-Mail antworten dürfen.
            </p>
          </form>
        </div>
      </section>

      {/* FOOTER */}
      <footer style={cineStyles.footer}>
        <div style={cineStyles.footerInner}>
          <div style={{display:"flex", gap: 16, alignItems:"center"}}>
            <img src={fk.brand.logoDark} alt="FK7" style={{height: 22}} />
            <span style={{...cineStyles.mono, color: "rgba(255,255,255,0.3)"}}>© 2026 · FK7 Media · Bielefeld</span>
          </div>
          <div style={{display:"flex", gap: 28}}>
            <a href="#" style={cineStyles.footerLink}>Instagram</a>
            <a href="#" style={cineStyles.footerLink}>TikTok</a>
            <a href="#" style={cineStyles.footerLink}>Impressum</a>
            <a href="#" style={cineStyles.footerLink}>Datenschutz</a>
          </div>
        </div>
      </footer>

      {/* VIDEO MODAL */}
      {modalProject && (
        <VideoModal project={modalProject} onClose={() => setModalProject(null)} accent={blue} />
      )}
    </div>
  );
}

// Bento Project Tile — Hover plays muted preview, click opens fullscreen modal.
function ProjectTile({ size, p, accent, onOpen }) {
  const ref = React.useRef(null);
  const [hover, setHover] = React.useState(false);
  const hasVideo = !!p.videoSrc;

  React.useEffect(() => {
    if (!ref.current) return;
    if (hover) ref.current.play().catch(() => {});
    else { ref.current.pause(); ref.current.currentTime = 0; }
  }, [hover]);

  const sizeMap = {
    wide:   { gridColumn: "span 2", gridRow: "span 1" },
    tall:   { gridColumn: "span 1", gridRow: "span 2" },
    square: { gridColumn: "span 1", gridRow: "span 1" },
  };

  return (
    <article
      className={`cine-tile ${hasVideo ? "cine-tile-playable" : ""}`}
      style={{...cineStyles.tile, ...sizeMap[size]}}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      onClick={() => hasVideo && onOpen(p)}
    >
      <div className="cine-tile-img" style={cineStyles.tileImg}>
        {hasVideo ? (
          <video
            ref={ref}
            src={p.videoSrc}
            muted loop playsInline preload="metadata"
            style={{width:"100%", height:"100%", objectFit:"cover", display:"block"}}
          />
        ) : (
          <div style={cineStyles.tilePlaceholder}>
            <span style={{...cineStyles.mono, color: "rgba(255,255,255,0.3)"}}>{p.category.toUpperCase()}</span>
          </div>
        )}
      </div>
      <div style={cineStyles.tileGradient} />

      {/* Play-Icon overlay nur bei klickbaren Tiles */}
      {hasVideo && (
        <div className="cine-play-icon">▶</div>
      )}

      {/* Dauer-Badge (oben rechts) — nur wenn duration gesetzt ist */}
      {p.duration && (
        <div style={cineStyles.tileMeta}>
          <span style={{...cineStyles.mono, background: "rgba(0,0,0,0.5)", padding: "4px 10px", borderRadius: 999, backdropFilter:"blur(6px)"}}>
            {p.duration}
          </span>
        </div>
      )}

      <div style={cineStyles.tileInfo}>
        <div style={{...cineStyles.mono, color: accent, marginBottom: 6}}>{p.type}</div>
        <h3 style={cineStyles.tileClient}>{p.client}</h3>
      </div>
    </article>
  );
}

// Vollbild-Modal mit Videoplayer (ESC oder Klick außerhalb schließt)
function VideoModal({ project, onClose, accent }) {
  React.useEffect(() => {
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    document.addEventListener("keydown", onKey);
    const prevOverflow = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    return () => {
      document.removeEventListener("keydown", onKey);
      document.body.style.overflow = prevOverflow;
    };
  }, [onClose]);

  return (
    <div className="cine-modal-overlay" style={cineStyles.modalOverlay} onClick={onClose}>
      <button
        className="cine-modal-close"
        aria-label="Schließen"
        onClick={(e) => { e.stopPropagation(); onClose(); }}
        style={cineStyles.modalClose}
      >
        ✕
      </button>

      <div className="cine-modal-content" style={cineStyles.modalContent} onClick={(e) => e.stopPropagation()}>
        <div style={cineStyles.modalVideoWrap}>
          <video
            src={project.videoSrc}
            controls
            autoPlay
            playsInline
            style={cineStyles.modalVideo}
          />
        </div>

        <div style={cineStyles.modalMeta}>
          <div>
            <div style={{...cineStyles.mono, color: accent, marginBottom: 6}}>{project.type}</div>
            <h3 style={cineStyles.modalTitle}>{project.client}</h3>
          </div>
          <div style={{...cineStyles.mono, color: "rgba(255,255,255,0.5)"}}>
            {project.duration && <>{project.duration} · </>}{project.year}
          </div>
        </div>
      </div>
    </div>
  );
}

const cineStyles = {
  root: {
    background: "#0a0a0a",
    color: "#f5f1ea",
    fontFamily: '"Geist", -apple-system, sans-serif',
    minHeight: "100%",
    width: "100%",
    overflow: "hidden",
  },
  mono: {
    fontFamily: '"Geist Mono", monospace',
    fontSize: 11,
    letterSpacing: "0.1em",
    textTransform: "uppercase",
    color: "rgba(255,255,255,0.6)",
  },
  serifI: {
    fontFamily: '"Instrument Serif", serif',
    fontStyle: "italic",
    fontWeight: 400,
  },

  // Nav
  nav: {
    position: "sticky", top: 0, zIndex: 50,
    padding: "20px 80px",
    background: "rgba(10,10,10,0.7)",
    backdropFilter: "blur(20px)",
    borderBottom: "1px solid rgba(255,255,255,0.06)",
  },
  navInner: { display: "flex", alignItems: "center", justifyContent: "space-between" },
  navLinks: { display: "flex", gap: 36 },
  navLink: { fontSize: 14, color: "rgba(255,255,255,0.8)", transition: "color 200ms" },

  btnPrimary: {
    display: "inline-flex", alignItems: "center", gap: 12,
    padding: "12px 20px",
    color: "#0a0a0a", borderRadius: 999, fontWeight: 500, fontSize: 14,
    border: "none", cursor: "pointer", transition: "transform 200ms",
  },
  btnGhost: {
    display: "inline-flex", alignItems: "center", gap: 12,
    padding: "18px 28px",
    color: "#f5f1ea", borderRadius: 999, fontWeight: 500, fontSize: 16,
    border: "1px solid rgba(255,255,255,0.2)", cursor: "pointer",
    background: "transparent",
  },

  // Hero
  hero: {
    position: "relative",
    minHeight: 760,
    padding: "120px 80px 100px",
    overflow: "hidden",
  },
  heroVideo: {
    position: "absolute", inset: 0,
    zIndex: 0,
  },
  heroGradient: {
    position: "absolute", inset: 0, zIndex: 1,
    background: "linear-gradient(180deg, rgba(10,10,10,0.4) 0%, rgba(10,10,10,0.6) 50%, rgba(10,10,10,0.95) 100%)",
  },
  heroContent: {
    position: "relative", zIndex: 2,
    maxWidth: 1000,
  },
  heroMeta: {
    display: "inline-flex", alignItems: "center", gap: 10,
    padding: "8px 14px",
    background: "rgba(255,255,255,0.06)",
    border: "1px solid rgba(255,255,255,0.12)",
    borderRadius: 999,
    backdropFilter: "blur(20px)",
    marginBottom: 40,
  },
  dot: { width: 8, height: 8, borderRadius: 999, display: "inline-block" },
  heroHeadline: {
    fontFamily: '"Bricolage Grotesque", sans-serif',
    fontSize: 132,
    fontWeight: 600,
    lineHeight: 0.92,
    letterSpacing: "-0.04em",
    margin: 0,
    marginBottom: 32,
  },
  heroSub: {
    fontSize: 22,
    lineHeight: 1.5,
    color: "rgba(255,255,255,0.7)",
    maxWidth: 600,
    margin: 0,
    marginBottom: 48,
  },
  heroCtas: {
    display: "flex", gap: 14, alignItems: "center",
    marginBottom: 120,
  },
  heroStats: {
    display: "grid", gridTemplateColumns: "repeat(4, 1fr)",
    gap: 0,
    paddingTop: 32,
    borderTop: "1px solid rgba(255,255,255,0.1)",
  },
  statBlock: { paddingRight: 32 },
  statK: {
    fontFamily: '"Bricolage Grotesque", sans-serif',
    fontSize: 56, fontWeight: 500, lineHeight: 1, letterSpacing: "-0.02em",
    marginBottom: 8,
  },
  statV: {
    fontFamily: '"Geist Mono", monospace',
    fontSize: 11, letterSpacing: "0.1em", textTransform: "uppercase",
    color: "rgba(255,255,255,0.5)",
  },

  // Marquee
  marquee: {
    padding: "32px 0",
    borderTop: "1px solid rgba(255,255,255,0.06)",
    borderBottom: "1px solid rgba(255,255,255,0.06)",
    display: "grid", gridTemplateColumns: "auto 1fr", alignItems: "center",
    gap: 60,
  },
  marqueeLabel: { paddingLeft: 80 },
  marqueeItem: {
    fontFamily: '"Bricolage Grotesque", sans-serif',
    fontSize: 28, fontWeight: 500, letterSpacing: "-0.02em",
    color: "rgba(255,255,255,0.4)",
    whiteSpace: "nowrap",
  },

  // Sections
  section: {
    padding: "120px 80px",
    position: "relative",
  },
  sectionHeader: {
    display: "flex", justifyContent: "space-between", alignItems: "flex-end",
    marginBottom: 64, gap: 80,
  },
  sectionLead: {
    fontSize: 17,
    lineHeight: 1.55,
    color: "rgba(255,255,255,0.65)",
    maxWidth: 380,
    margin: 0,
  },
  h2: {
    fontFamily: '"Bricolage Grotesque", sans-serif',
    fontSize: 64, fontWeight: 500, lineHeight: 1.02,
    letterSpacing: "-0.03em",
    margin: 0, marginTop: 16,
  },
  linkArrow: {
    display: "inline-flex", alignItems: "center", gap: 10,
    fontSize: 14,
    color: "rgba(255,255,255,0.8)",
    borderBottom: "1px solid rgba(255,255,255,0.2)",
    paddingBottom: 4,
  },

  // Bento Grid — 4 cols, fixed row height. Sizes fit cleanly in 2 rows.
  bento: {
    display: "grid",
    gridTemplateColumns: "repeat(4, 1fr)",
    gridAutoRows: "260px",
    gap: 12,
  },
  tile: {
    position: "relative", overflow: "hidden", borderRadius: 12,
    background: "#1a1a1a",
  },
  tileImg: {
    position: "absolute", inset: 0,
  },
  tilePlaceholder: {
    width: "100%", height: "100%",
    background: "linear-gradient(135deg, #1f1f1f 0%, #0f0f0f 100%)",
    display: "flex", alignItems: "center", justifyContent: "center",
  },
  tileGradient: {
    position: "absolute", inset: 0,
    background: "linear-gradient(180deg, transparent 30%, rgba(0,0,0,0.85) 100%)",
    pointerEvents: "none",
  },
  tileMeta: {
    position: "absolute", top: 14, right: 14,
    display: "flex", gap: 6,
    zIndex: 2,
  },
  tileInfo: {
    position: "absolute", bottom: 20, left: 20, right: 20,
    zIndex: 2,
  },
  tileClient: {
    fontFamily: '"Bricolage Grotesque", sans-serif',
    fontSize: 24, fontWeight: 500, lineHeight: 1.1,
    margin: 0, letterSpacing: "-0.02em",
  },

  // Services
  servicesGrid: {
    display: "grid", gridTemplateColumns: "repeat(5, 1fr)",
    gap: 1,
    background: "rgba(255,255,255,0.06)",
    border: "1px solid rgba(255,255,255,0.06)",
    borderRadius: 16,
    overflow: "hidden",
  },
  serviceCard: {
    background: "#0f0f0f",
    padding: 32,
    display: "flex", flexDirection: "column",
    minHeight: 380,
  },
  serviceTitle: {
    fontFamily: '"Bricolage Grotesque", sans-serif',
    fontSize: 28, fontWeight: 500, letterSpacing: "-0.02em",
    margin: 0, marginBottom: 16, lineHeight: 1.05,
  },
  serviceDesc: {
    fontSize: 14, lineHeight: 1.55, color: "rgba(255,255,255,0.65)",
    margin: 0, marginBottom: 24, flex: 1,
  },
  serviceList: { listStyle: "none", padding: 0, margin: 0 },
  serviceListItem: {
    fontSize: 13, lineHeight: 1.7,
    color: "rgba(255,255,255,0.8)",
    fontFamily: '"Geist Mono", monospace',
  },

  // USP
  uspIntro: { marginBottom: 80 },
  uspGrid: {
    display: "grid", gridTemplateColumns: "repeat(5, 1fr)",
    gap: 40,
  },
  uspNum: {
    fontFamily: '"Bricolage Grotesque", sans-serif',
    fontSize: 32, fontWeight: 500,
    marginBottom: 24,
    paddingBottom: 16,
    borderBottom: "1px solid rgba(255,255,255,0.1)",
  },
  uspTitle: {
    fontFamily: '"Bricolage Grotesque", sans-serif',
    fontSize: 22, fontWeight: 500, letterSpacing: "-0.02em",
    lineHeight: 1.1, margin: 0, marginBottom: 12,
  },
  uspBody: {
    fontSize: 14, lineHeight: 1.55, color: "rgba(255,255,255,0.6)",
    margin: 0,
  },

  // Process
  processRow: {
    display: "grid", gridTemplateColumns: "repeat(5, 1fr)",
    gap: 24, position: "relative",
  },
  processStep: { position: "relative", paddingRight: 24 },
  processNum: {
    fontFamily: '"Bricolage Grotesque", sans-serif',
    fontSize: 56, fontWeight: 500, lineHeight: 1, marginBottom: 24,
  },
  processTitle: {
    fontFamily: '"Bricolage Grotesque", sans-serif',
    fontSize: 24, fontWeight: 500, margin: 0, marginBottom: 12,
    letterSpacing: "-0.02em",
  },
  processBody: {
    fontSize: 14, lineHeight: 1.55, color: "rgba(255,255,255,0.6)",
    margin: 0,
  },
  processConnector: {
    position: "absolute", top: 28, right: -12,
    width: 20, height: 1, background: "rgba(255,255,255,0.15)",
  },

  // Team
  teamGrid: {
    display: "grid", gridTemplateColumns: "1fr 1fr", gap: 32,
  },
  teamCard: { },
  teamPortrait: {
    aspectRatio: "4/5",
    overflow: "hidden", borderRadius: 12,
    position: "relative",
    background: "#141414",
  },
  portraitPlaceholder: {
    width: "100%", height: "100%",
    position: "absolute", inset: 0,
    display: "flex", alignItems: "center", justifyContent: "center",
  },
  portraitInitial: {
    fontFamily: '"Bricolage Grotesque", sans-serif',
    fontSize: 220, fontWeight: 400,
    color: "rgba(255,255,255,0.1)",
    lineHeight: 1,
  },
  teamName: {
    fontFamily: '"Bricolage Grotesque", sans-serif',
    fontSize: 40, fontWeight: 500, letterSpacing: "-0.03em",
    margin: 0,
  },
  teamBio: {
    fontSize: 16, lineHeight: 1.5,
    color: "rgba(255,255,255,0.7)",
    margin: 0, marginBottom: 20,
    maxWidth: 460,
  },
  skillRow: { display: "flex", flexWrap: "wrap", gap: 8 },
  skillChip: {
    padding: "6px 12px",
    borderRadius: 999,
    border: "1px solid rgba(255,255,255,0.15)",
    fontSize: 12,
    fontFamily: '"Geist Mono", monospace',
    letterSpacing: "0.05em",
    color: "rgba(255,255,255,0.8)",
  },

  // Testimonials
  testimonialsRow: {
    display: "grid", gridTemplateColumns: "repeat(3, 1fr)",
    gap: 16,
  },
  testimonial: {
    background: "#141414",
    border: "1px solid rgba(255,255,255,0.06)",
    borderRadius: 16,
    padding: 36,
    margin: 0,
    display: "flex", flexDirection: "column",
  },
  quoteMark: {
    fontFamily: '"Instrument Serif", serif',
    fontSize: 80, lineHeight: 0.6,
    marginBottom: 8,
  },
  testimonialQuote: {
    fontFamily: '"Bricolage Grotesque", sans-serif',
    fontSize: 20, fontWeight: 400, lineHeight: 1.4,
    letterSpacing: "-0.01em",
    color: "#f5f1ea",
    margin: 0, marginBottom: 32, flex: 1,
  },
  testimonialFooter: {
    paddingTop: 20, borderTop: "1px solid rgba(255,255,255,0.08)",
  },

  // FAQ
  faqList: { borderTop: "1px solid rgba(255,255,255,0.1)" },
  faqItem: {
    borderBottom: "1px solid rgba(255,255,255,0.1)",
  },
  faqSummary: {
    display: "flex", alignItems: "center", gap: 32,
    padding: "32px 0",
    fontSize: 22,
  },
  faqQ: {
    flex: 1,
    fontFamily: '"Bricolage Grotesque", sans-serif',
    fontSize: 24, fontWeight: 500, letterSpacing: "-0.02em",
  },
  faqPlus: {
    fontSize: 28, fontWeight: 300,
    width: 32, height: 32,
    display: "flex", alignItems: "center", justifyContent: "center",
  },
  faqA: {
    paddingBottom: 32, paddingLeft: 72,
    fontSize: 16, lineHeight: 1.6,
    color: "rgba(255,255,255,0.7)",
    maxWidth: 720,
  },

  // Contact
  contactGrid: {
    display: "grid", gridTemplateColumns: "1fr 1fr",
    gap: 80,
  },
  contactMeta: {
    display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24,
    marginTop: 64,
    paddingTop: 32,
    borderTop: "1px solid rgba(255,255,255,0.1)",
  },
  contactValue: {
    fontFamily: '"Bricolage Grotesque", sans-serif',
    fontSize: 22, fontWeight: 500, letterSpacing: "-0.02em",
  },
  form: {
    display: "flex", flexDirection: "column", gap: 28,
    background: "#141414",
    padding: 40,
    borderRadius: 16,
    border: "1px solid rgba(255,255,255,0.06)",
  },
  formField: { display: "flex", flexDirection: "column", gap: 8 },
  formLabel: {
    fontFamily: '"Geist Mono", monospace',
    fontSize: 11, letterSpacing: "0.1em",
    textTransform: "uppercase",
    color: "rgba(255,255,255,0.5)",
  },
  formInput: {
    background: "transparent",
    border: "none",
    borderBottom: "1px solid rgba(255,255,255,0.15)",
    padding: "12px 0",
    fontSize: 16,
    color: "#f5f1ea",
    outline: "none",
    fontFamily: "inherit",
  },

  // Footer
  footer: {
    padding: "40px 80px",
    borderTop: "1px solid rgba(255,255,255,0.08)",
    background: "#080808",
  },
  footerInner: {
    display: "flex", justifyContent: "space-between", alignItems: "center",
  },
  footerLink: {
    fontSize: 13, color: "rgba(255,255,255,0.5)",
  },

  // Video Modal
  modalOverlay: {
    position: "fixed", inset: 0, zIndex: 100,
    background: "rgba(0,0,0,0.92)",
    backdropFilter: "blur(20px)",
    display: "flex", alignItems: "center", justifyContent: "center",
    padding: 40,
    cursor: "pointer",
  },
  modalClose: {
    position: "fixed", top: 24, right: 32, zIndex: 101,
    width: 48, height: 48, borderRadius: 999,
    background: "rgba(255,255,255,0.1)",
    border: "1px solid rgba(255,255,255,0.2)",
    color: "#fff", fontSize: 18, cursor: "pointer",
    display: "flex", alignItems: "center", justifyContent: "center",
    backdropFilter: "blur(20px)",
    fontFamily: "inherit",
  },
  modalContent: {
    position: "relative",
    width: "100%", maxWidth: 1280,
    cursor: "default",
  },
  modalVideoWrap: {
    width: "100%",
    background: "#000",
    borderRadius: 16,
    overflow: "hidden",
    border: "1px solid rgba(255,255,255,0.08)",
    boxShadow: "0 32px 96px rgba(0,0,0,0.6)",
  },
  modalVideo: {
    width: "100%", height: "auto",
    maxHeight: "78vh",
    display: "block",
    background: "#000",
  },
  modalMeta: {
    marginTop: 24,
    display: "flex", justifyContent: "space-between", alignItems: "flex-end",
    gap: 24,
  },
  modalTitle: {
    fontFamily: '"Bricolage Grotesque", sans-serif',
    fontSize: 32, fontWeight: 500, letterSpacing: "-0.02em",
    margin: 0,
  },
};

window.VariantCinematic = VariantCinematic;