/* FX2 Events — public marketing site. Accent is injected from the
   org's brand_accent setting so it always matches the platform. */
:root{
  --accent:#7c6cf0;
  --accent-2:#a29bfe;
  --bg:#0f0f14;
  --bg-2:#15151f;
  --card:#1a1a2e;
  --line:#2a2a3c;
  --text:#e8e8ea;
  --muted:#9a9ab0;
  --radius:16px;
  --maxw:1140px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3,h4{line-height:1.2;font-weight:800;letter-spacing:-0.02em}
h2{font-size:clamp(1.6rem,3.2vw,2.4rem);margin-bottom:.4rem}
section{padding:clamp(3rem,7vw,6rem) 1.25rem}
.wrap{max-width:var(--maxw);margin:0 auto}
.wrap.narrow{max-width:720px}
.muted{color:var(--muted)}
.small{font-size:.85rem}
.center{text-align:center}
.section-lead{color:var(--muted);margin-bottom:2rem;max-width:60ch}
.topbar-accent{height:3px;background:linear-gradient(90deg,var(--accent),var(--accent-2),var(--accent));position:fixed;inset:0 0 auto 0;z-index:60}

/* Nav */
.nav{position:fixed;top:3px;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:.85rem clamp(1rem,4vw,2.5rem);background:rgba(15,15,20,.82);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:800;font-size:1.1rem}
.brand img{max-height:34px;max-width:140px}
.nav-links{display:flex;align-items:center;gap:1.4rem}
.nav-links a{font-size:.92rem;color:var(--muted);transition:color .15s}
.nav-links a:hover{color:var(--text)}
/* the CTA must stay white — .nav-links a would otherwise win on specificity */
.nav-links a.cta,.nav-links a.cta:hover{color:#fff}
.lang-sel{background:var(--bg-2);border:1px solid var(--line);color:var(--text);border-radius:8px;
  padding:.3rem .6rem;font:inherit;font-size:.8rem;cursor:pointer;line-height:1.2}
.lang-sel:hover{border-color:var(--accent)}
.lang-sel:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.foot-links .lang-sel{margin:0 .2rem}
.cta,.btn{display:inline-block;border-radius:24px;font-weight:700;cursor:pointer;transition:transform .15s,box-shadow .15s;border:none}
.cta{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;padding:.6rem 1.35rem;
  font-size:.92rem;font-weight:800;letter-spacing:.01em;border:1px solid rgba(255,255,255,.28);
  box-shadow:0 6px 20px rgba(124,108,240,.5);text-shadow:0 1px 2px rgba(0,0,0,.35)}
.cta:hover{transform:translateY(-1px);filter:brightness(1.12)}
.cta:focus-visible{outline:2px solid #fff;outline-offset:2px}
#loginBtn::before{content:"\1F511";margin-right:.4rem}
.nav-toggle{display:none;background:none;border:none;color:var(--text);font-size:1.4rem;cursor:pointer}

/* Hero */
.hero{min-height:78vh;display:flex;align-items:center;justify-content:center;text-align:center;
  background:radial-gradient(1100px 560px at 50% 0%,rgba(124,108,240,.38),transparent 62%),var(--bg);padding:8rem 1.25rem 4.5rem}
.hero-inner{max-width:820px}
.eyebrow{text-transform:uppercase;letter-spacing:.25em;font-size:.78rem;color:var(--accent-2);font-weight:700;margin-bottom:1rem}
.hero h1{font-size:clamp(2.4rem,6vw,4.2rem);margin-bottom:1rem;
  background:linear-gradient(120deg,#fff 40%,var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .lead{font-size:clamp(1rem,2vw,1.2rem);color:var(--muted);max-width:60ch;margin:0 auto 2rem}
.hero-cta{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}
.btn{padding:.8rem 1.6rem;font-size:.95rem}
.btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(124,108,240,.35)}
.btn-ghost{background:transparent;border:1px solid var(--line);color:var(--text)}
.btn-ghost:hover{border-color:var(--accent)}

/* Cards / grids */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.pillar-2{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem;max-width:760px;margin:0 auto}
.pillars{background:var(--bg-2)}
.card,.svc,.quote,.post{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem}
.card{text-align:center}
.card .ico{font-size:2rem;margin-bottom:.6rem}
.card h3,.svc h4,.post h4{margin-bottom:.4rem}
.card p,.svc p,.post p{color:var(--muted);font-size:.95rem}
.svc{transition:transform .15s,border-color .15s}
.svc:hover{transform:translateY(-3px);border-color:var(--accent)}

/* Gallery */
.gal-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem}
.gal-grid .tile{aspect-ratio:4/3;border-radius:12px;border:1px solid var(--line);overflow:hidden;position:relative;
  background:linear-gradient(135deg,rgba(124,108,240,.35),rgba(162,155,254,.15))}
.gal-grid .tile img{width:100%;height:100%;object-fit:cover}
.gal-grid .tile span{position:absolute;inset:auto 0 0 0;padding:.5rem .7rem;font-size:.78rem;color:#fff;
  background:linear-gradient(transparent,rgba(0,0,0,.55))}

/* Reviews */
.reviews{background:var(--bg-2)}
.quote p{font-size:1rem;margin-bottom:.8rem}
.quote cite{color:var(--accent-2);font-style:normal;font-size:.85rem}

/* Blog */
.post-img{height:130px;border-radius:10px;margin-bottom:.9rem;background:linear-gradient(135deg,rgba(124,108,240,.3),rgba(162,155,254,.12))}

/* Contact */
.contact{background:var(--bg-2)}
#contactForm{display:flex;flex-direction:column;gap:.9rem;margin-top:1.5rem}
#contactForm .row{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
#contactForm label{display:flex;flex-direction:column;gap:.35rem;font-size:.85rem;color:var(--muted)}
#contactForm input,#contactForm textarea{background:var(--bg);border:1px solid var(--line);border-radius:10px;
  padding:.7rem .8rem;color:var(--text);font:inherit;font-size:.95rem}
#contactForm input:focus,#contactForm textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(124,108,240,.18)}
#contactForm .consent{flex-direction:row;align-items:flex-start;gap:.5rem;font-size:.82rem}
#contactForm .consent input{width:auto;margin-top:.15rem}
#hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.form-msg{font-size:.88rem;min-height:1.2em}
.form-msg.ok{color:#46d39a}.form-msg.err{color:#ff6b6b}
.contact-info{display:flex;gap:1.5rem;flex-wrap:wrap;justify-content:center;margin-top:1.5rem;color:var(--accent-2);font-size:.9rem}

/* Footer */
.foot{border-top:1px solid var(--line);background:var(--bg);padding:2.5rem 1.25rem 1.5rem}
.foot-in{display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;margin-bottom:1.2rem}
.foot-links{display:flex;gap:1.2rem;flex-wrap:wrap;align-items:center}
.foot-links a{color:var(--muted);font-size:.88rem}
.foot-links a:hover{color:var(--text)}

/* ── Graphics: hero backdrop, orbs, equalizer, icons, tiles ── */
.hero{position:relative;overflow:hidden}
.hero-inner{position:relative;z-index:2}
.hero-bg{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5}
.orb-a{width:520px;height:520px;left:-120px;top:-140px;
  background:radial-gradient(circle,var(--accent),transparent 65%)}
.orb-b{width:460px;height:460px;right:-120px;top:30px;
  background:radial-gradient(circle,var(--accent-2),transparent 65%);opacity:.35}
.eq{position:absolute;left:0;right:0;bottom:54px;display:flex;align-items:flex-end;justify-content:center;
  gap:6px;height:120px;opacity:.28}
.eq i{display:block;width:7px;border-radius:4px 4px 0 0;
  background:linear-gradient(var(--accent-2),var(--accent));
  animation:eqp 1.4s ease-in-out infinite alternate}
@keyframes eqp{from{height:12%}to{height:100%}}
.hero-wave{position:absolute;left:0;right:0;bottom:0;width:100%;height:120px;display:block}
.hero-wave path{fill:var(--bg-2)}
/* soft decorative blobs to break the text walls */
.services,.blog{position:relative;overflow:hidden}
.services::before,.blog::before{content:"";position:absolute;width:380px;height:380px;border-radius:50%;
  filter:blur(90px);opacity:.16;background:radial-gradient(circle,var(--accent),transparent 65%);pointer-events:none}
.services::before{right:-140px;top:-80px}
.blog::before{left:-160px;bottom:-120px}
.card .ico{display:flex;align-items:center;justify-content:center;margin-bottom:.7rem}
.card .ico svg{width:40px;height:40px;color:var(--accent-2);
  background:rgba(124,108,240,.12);border:1px solid var(--line);border-radius:14px;padding:9px}
/* gallery tiles: original SVG-ish art so it looks intentional pre-photos */
.gal-grid .tile{background:linear-gradient(135deg,var(--card),var(--bg-2))}
.tile-art{position:absolute;inset:0;color:var(--accent-2);background:linear-gradient(160deg,#13131c,#1c1a2b)}
.tile-art svg{width:100%;height:100%;display:block}
.gal-grid .tile img{position:absolute;inset:0;z-index:2}
/* Event carousel — crossfade variant.
   .car-fade stacks every slide at the same absolute position; only the
   .is-active slide is opaque (fade 800ms). The active slide's image
   runs a slow zoom (Ken Burns) for that "alive" feel marketing
   slideshows are known for. The slide variant (legacy .car-track) is
   kept for any older callers that still need it. */
.car{position:relative;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#13131c;max-width:980px;margin:0 auto}
.car-track{display:flex;transition:transform .55s cubic-bezier(.4,0,.2,1)}
.car-stage{position:relative;aspect-ratio:16/9}
.car-fade .car-slide{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .8s ease-in-out;pointer-events:none;background:linear-gradient(160deg,#13131c,#1c1a2b);color:var(--accent-2)}
.car-fade .car-slide.is-active{opacity:1;pointer-events:auto}
/* Ken Burns via TRANSITION (not keyframe animation). The image eases
   from 1.02 → 1.10 while active and eases back while inactive — both
   directions transitioned, so the outgoing slide never snaps its scale
   mid-fade (that snap was the visible "bump" before each switch). The
   reverse zoom happens while the slide is at opacity 0, so it's unseen. */
.car-fade .car-slide img{transform:scale(1.02);transition:transform 7s ease-out;will-change:transform}
.car-fade .car-slide.is-active img{transform:scale(1.10)}
@media (prefers-reduced-motion: reduce){
  .car-fade .car-slide{transition:opacity .15s linear}
  .car-fade .car-slide img{transition:none;transform:none}
  .car-fade .car-slide.is-active img{transform:none}
}
.car-slide{position:relative;min-width:100%;aspect-ratio:16/9;background:linear-gradient(160deg,#13131c,#1c1a2b);color:var(--accent-2)}
.car-slide img,.car-slide video,.car-slide iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.car-slide img{object-fit:cover;z-index:2}
.car-slide video{object-fit:contain;background:#000;z-index:3}
.car-slide iframe{z-index:3}
.car-cap{position:absolute;left:0;right:0;bottom:0;z-index:4;padding:1.4rem 1.1rem .8rem;font-size:.95rem;font-weight:600;color:#fff;
  background:linear-gradient(transparent,rgba(0,0,0,.7));pointer-events:none}
.car-play{position:absolute;inset:0;margin:auto;z-index:4;width:64px;height:64px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(124,108,240,.92);color:#fff;font-size:1.5rem;line-height:1;box-shadow:0 6px 20px rgba(0,0,0,.45)}
.car-play:hover{filter:brightness(1.12);transform:scale(1.05)}
.car-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:40px;height:40px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(0,0,0,.45);color:#fff;font-size:1.6rem;line-height:1}
.car-nav:hover{background:var(--accent)}
.car-prev{left:12px}.car-next{right:12px}
.car-dots{position:absolute;left:0;right:0;bottom:.6rem;z-index:5;display:flex;gap:.4rem;justify-content:center}
.car-dot{width:8px;height:8px;border-radius:50%;border:none;cursor:pointer;background:rgba(255,255,255,.4);padding:0}
.car-dot.on{background:var(--accent-2);width:22px;border-radius:5px}
.post-img{background:
  radial-gradient(circle at 25% 30%,rgba(162,155,254,.45),transparent 60%),
  linear-gradient(135deg,rgba(124,108,240,.3),rgba(20,20,31,.2));position:relative;overflow:hidden}
.post-img::after{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(115deg,rgba(255,255,255,.045) 0 3px,transparent 3px 14px)}
#trustbox a{color:var(--accent-2);font-size:.9rem}
@media(prefers-reduced-motion:reduce){.eq i{animation:none;height:46%}}

@media(max-width:860px){
  .grid-3{grid-template-columns:1fr 1fr}
  .gal-grid{grid-template-columns:repeat(3,1fr)}
  .nav-toggle{display:block}
  .nav-links{position:fixed;top:0;right:0;height:100vh;width:min(78vw,300px);flex-direction:column;align-items:flex-start;
    gap:1.2rem;padding:5rem 1.8rem;background:var(--card);border-left:1px solid var(--line);transform:translateX(100%);
    transition:transform .25s}
  .nav-links.open{transform:translateX(0)}
}
@media(max-width:560px){
  .grid-3,.pillar-2,.gal-grid,#contactForm .row{grid-template-columns:1fr}
  .hero{min-height:88vh}
}

/* Social icon row in the footer. Subtle by default; brand-accent on hover. */
.social-row { display: flex; }
.social-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  color: var(--muted); background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  text-decoration: none; transition: all 0.18s ease;
}
.social-ico:hover, .social-ico:focus {
  color: #fff; background: var(--accent); border-color: var(--accent);
  transform: translateY(-1px);
}
.social-ico svg { display: block; }

/* Smaller, tighter icon variant when the row sits inside the top nav. */
.nav-social { display: flex; gap: 0.4rem; align-items: center; }
.nav-social .social-ico {
  width: 30px; height: 30px;
  background: transparent; border: 1px solid transparent;
}
.nav-social .social-ico svg { width: 16px; height: 16px; }
.nav-social .social-ico:hover,
.nav-social .social-ico:focus {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
@media (max-width: 760px) {
  /* On the mobile slide-in nav, allow icons to wrap into their own row. */
  .nav-social { flex-wrap: wrap; justify-content: center; margin: 0.5rem 0; }
}

/* Social wall — curated TikTok / Instagram / Facebook / YouTube embeds. */
.social-wall { padding: 4rem 1.5rem; background: var(--bg, #0f0f14); }
.social-wall-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}
.sw-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.sw-frame {
  position: relative;
  background: #0b0b12;
}
.sw-frame iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}
.sw-cap {
  padding: 0.6rem 0.8rem;
  font-size: 0.85rem;
  color: var(--muted);
}
@media (max-width: 560px) {
  .social-wall-grid { grid-template-columns: 1fr; }
}

/* Social wall — original-file fallback player (shown when the embed
   iframe is unreachable, e.g. the social account was closed). */
.sw-frame .sw-fallback {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  background: #0b0b12;
}