/* ============================================================
   Smart Vfx — pixel-perfect reproduction of Figma node 439:926
   Design canvas: 1920 x 6065. The whole .stage is scaled down
   to fit the viewport so every element keeps its exact position.
   ============================================================ */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: #01010a;
  overflow-x: hidden;
}
html { scroll-behavior: smooth; }

body {
  font-family: 'Lato', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  color: #fff;
}

/* Scaling wrapper -------------------------------------------------- */
.frame {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #01010a;
}
.stage {
  position: relative;
  width: 1920px;
  height: 6250px;
  transform-origin: top left;
  background: #01010a;
}

/* Every node inside the canvas is absolutely positioned, exactly
   like the Figma layer tree. Flex groups opt back into flow. */
.stage * { position: absolute; margin: 0; }
.stage .flex { display: flex; align-items: center; }
.stage .flex > * { position: relative; }
.stage strong { position: static; }
.stage p span { position: static; }

.stage img { display: block; max-width: none; }

/* Typography helpers ---------------------------------------------- */
.lato-r  { font-family: 'Lato', sans-serif; font-weight: 400; }
.lato-b  { font-family: 'Lato', sans-serif; font-weight: 700; }
.lato-bl { font-family: 'Lato', sans-serif; font-weight: 900; }
.dm      { font-family: 'DM Sans', sans-serif; font-weight: 400; font-variation-settings: 'opsz' 14; }
.godber  { font-family: 'Godber', 'Playfair Display', Georgia, serif; font-size: 48px; color: #fff; white-space: nowrap; }

/* white → transparent gradient text (headlines) */
.gt {
  background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.06) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* white → 0.31 variant (20px sub-labels + footer tagline) */
.gt31 {
  background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.31) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Pills ------------------------------------------------------------ */
.pill {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 16px;
  border-radius: 59px;
  background: rgba(217, 217, 217, 0.2);
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  color: #fff;
  white-space: nowrap;
}
.pill > * { position: relative; }
.pill img { width: 25px; height: 25px; }

/* Buttons ---------------------------------------------------------- */
.btn { display: flex; align-items: center; justify-content: center; cursor: pointer; }
.btn > * { position: relative; }
.btn-ghost { border: 1px solid rgba(255, 255, 255, 0.21); border-radius: 8px; padding: 10px 20px; font-size: 16px; color: #fff; }
.btn-grad  { border: 1px solid rgba(255, 255, 255, 0.21); border-radius: 8px; padding: 10px; font-size: 16px; color: #fff; background: linear-gradient(180deg, #5e00d0, #8648dd); }
.btn-white { background: #fff; color: #000; border-radius: 11px; padding: 10px 20px; font-size: 24px; }
.btn-glass { background: rgba(255, 255, 255, 0.15); color: #fff; border-radius: 11px; padding: 10px 20px; font-size: 24px; }

/* Cards ------------------------------------------------------------ */
.card {
  background: #01010a;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 30px;
  overflow: hidden;
}
.tex { object-fit: cover; pointer-events: none; }

/* radial glow behind an icon circle */
.icon-circle {
  border-radius: 50%;
  overflow: hidden;
}
.icon-circle img { position: absolute; inset: 0; width: 100%; height: 100%; }

/* panel (testimonials + cta big rounded blocks) */
.panel {
  border: 0.5px solid #989898;
  border-radius: 62px;
  overflow: hidden;
}
.panel-fade {
  background: linear-gradient(180deg, rgba(1, 1, 10, 0) 18.3%, #01010a 45.6%);
  filter: blur(2px);
  pointer-events: none;
}

/* dashed connector line for the workflow steps */
.dashed { border-top: 1.5px dashed #565656; height: 0; }

/* ============================================================
   CORE SERVICES — scroll animation
   ============================================================ */
/* left list: all items full white; pinned in place while cards scroll */
.svc-item {
  opacity: 1;
  color: #fff;
  cursor: default;
}

/* right image cards: gentle one-time fade-in as they enter view */
.svc-shot {
  opacity: 0;
  transition: opacity 0.7s ease;
}
.svc-shot.in { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .svc-shot { opacity: 1; transition: none; }
}

/* ============================================================
   FIXED SITE NAV — shared across mobile / tablet / desktop
   Replaces the in-canvas nav and the old mobile nav.
   ============================================================ */
.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: space-between;
  height: 64px; padding: 0 clamp(16px, 4vw, 40px);
  background: rgba(2, 2, 10, 0.9);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.35);
  font-family: 'Lato', sans-serif;
}
.site-nav a { color: #fff; text-decoration: none; }
.sn-brand { font-family: 'Godber', 'Playfair Display', Georgia, serif; font-size: 28px; color: #fff; }
.sn-links { display: none; gap: 40px; font-size: 16px; }
.sn-links a { transition: opacity 0.2s ease; }
.sn-links a:hover { opacity: 0.7; }
.sn-actions { display: none; gap: 14px; }
.sn-btn { display: inline-flex; align-items: center; justify-content: center; padding: 9px 18px; border-radius: 8px; font-size: 15px; }
.sn-btn.ghost { border: 1px solid rgba(255, 255, 255, 0.21); }
.sn-btn.grad { background: linear-gradient(180deg, #5e00d0, #8648dd); border: 1px solid rgba(255, 255, 255, 0.21); }
.sn-burger { display: inline-flex; background: none; border: 0; color: #fff; font-size: 24px; line-height: 1; cursor: pointer; padding: 4px 8px; }
.sn-menu {
  position: fixed; top: 64px; left: 0; right: 0; z-index: 999; display: none;
  flex-direction: column; gap: 2px; padding: 10px clamp(16px, 4vw, 40px) 18px;
  background: rgba(2, 2, 10, 0.98); border-bottom: 0.5px solid rgba(255, 255, 255, 0.2);
}
.sn-menu.open { display: flex; }
.sn-menu a { color: #fff; text-decoration: none; padding: 11px 0; font-size: 17px; }
.sn-menu .sn-actions { display: flex; margin-top: 10px; }

@media (min-width: 992px) {
  .site-nav { height: 72px; }
  .sn-links, .sn-actions { display: flex; }
  .sn-burger { display: none; }
  .sn-brand { font-size: 32px; }
}

/* the fixed nav replaces the in-canvas nav and the old mobile nav */
.canvas-nav { display: none !important; }
.m-nav, .m-menu { display: none !important; }
@media (max-width: 991px) { .mobile { padding-top: 64px; } }

/* ============================================================
   RESPONSIVE (tablet + mobile) — reflowing layout, no framework
   Desktop (>=992px) keeps the pixel-perfect scaled canvas (.frame).
   Below that, .frame is hidden and .mobile takes over.
   ============================================================ */
.mobile { display: none; }

@media (max-width: 991px) {
  .frame { display: none; }
  .mobile { display: block; }
}

/* shared tokens for the mobile layout */
.mobile {
  --pad: clamp(16px, 5vw, 40px);
  --grad-a: #5e00d0;
  --grad-b: #8648dd;
  color: #fff;
  font-family: 'Lato', sans-serif;
}
.mobile img { display: block; max-width: 100%; }
.mobile a { color: #fff; text-decoration: none; }
.mobile section { padding: clamp(48px, 9vw, 96px) var(--pad); }
.mobile .m-gt {
  background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,0.28) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.mobile .m-pill {
  display: inline-flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 16px; border-radius: 59px;
  background: rgba(217,217,217,0.2); font-family: 'DM Sans', sans-serif;
  font-size: 15px;
}
.mobile .m-pill img { width: 22px; height: 22px; }
.mobile .m-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 22px; border-radius: 10px; font-size: 16px; cursor: pointer;
}
.mobile .m-btn.white { background: #fff; color: #000; }
.mobile .m-btn.glass { background: rgba(255,255,255,0.15); color: #fff; }
.mobile .m-btn.grad { background: linear-gradient(180deg,var(--grad-a),var(--grad-b)); color:#fff; border:1px solid rgba(255,255,255,0.21); }
.mobile .m-btn.ghost { border: 1px solid rgba(255,255,255,0.21); color: #fff; }

/* nav */
.m-nav {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px var(--pad);
  background: #02020a; border-bottom: 0.5px solid rgba(255,255,255,0.4);
}
.m-nav .brand { font-family: 'Godber','Playfair Display',Georgia,serif; font-size: 30px; }
.m-burger { background: none; border: 0; color: #fff; font-size: 26px; line-height: 1; cursor: pointer; padding: 4px 8px; }
.m-menu {
  display: none; flex-direction: column; gap: 6px;
  padding: 8px var(--pad) 18px; background: #02020a;
  border-bottom: 0.5px solid rgba(255,255,255,0.2);
  position: sticky; top: 62px; z-index: 99;
}
.m-menu.open { display: flex; }
.m-menu a { padding: 10px 0; font-size: 17px; }
.m-menu .m-menu-actions { display: flex; gap: 12px; margin-top: 8px; }

/* hero */
.m-hero {
  position: relative; text-align: center; overflow: hidden;
  background: #02020a;
  display: flex; flex-direction: column; align-items: center; gap: 22px;
}
.m-hero .glow {
  position: absolute; top: 40%; left: 50%; transform: translate(-50%,-50%);
  width: 160%; max-width: none; pointer-events: none; z-index: 0;
}
.m-hero > * { position: relative; z-index: 1; }
.m-hero h1 { font-size: clamp(34px, 9vw, 60px); font-weight: 700; line-height: 1.08; margin: 6px 0 0; }
.m-hero p.sub { font-family: 'DM Sans', sans-serif; font-size: 16px; max-width: 640px; margin: 0; }
.m-hero .m-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.m-hero .m-cta .m-btn { font-size: clamp(16px, 4.5vw, 22px); }
.m-logos {
  position: relative; overflow: hidden;
  padding-top: 28px; margin-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.15); width: min(667px, 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.m-logos-track {
  display: flex; align-items: center; gap: 44px; width: max-content;
  animation: m-logos-scroll 18s linear infinite;
}
.m-logos-track img { height: 28px; width: auto; object-fit: contain; flex: 0 0 auto; }
@keyframes m-logos-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .m-logos-track { animation: none; flex-wrap: wrap; justify-content: center; width: 100%; }
}

/* generic section heading */
.m-head { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; margin-bottom: 40px; }
.m-head h2 { font-size: clamp(26px, 6vw, 40px); font-weight: 700; margin: 0; }

/* stats + testimonials cards */
.m-grid { display: grid; gap: 18px; }
.m-grid.cols3 { grid-template-columns: repeat(3, 1fr); }
.m-grid.cols2 { grid-template-columns: repeat(2, 1fr); }
.m-card {
  position: relative; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.18); border-radius: 26px;
  padding: 30px 20px; background:
    radial-gradient(120% 70% at 50% 0%, rgba(94,0,208,0.16), transparent 55%), #01010a;
}
.m-card .m-icon {
  width: 60px; height: 60px; border-radius: 50%;
  display: grid; place-items: center; margin: 0 auto 18px;
  background: radial-gradient(circle at 50% 40%, rgba(134,72,221,0.5), rgba(94,0,208,0.15) 70%), rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.18);
}
.m-card .m-icon img { width: 32px; height: 32px; }
.m-card h3 { font-size: 22px; font-weight: 700; text-align: center; margin: 0 0 12px; }
.m-card p.desc { font-size: 15px; text-align: center; color: #fff; margin: 0 auto; max-width: 260px; line-height: 1.4; }

/* services (mobile: stacked) */
.m-services .m-svc-list { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-bottom: 34px; }
.m-services .m-svc-list span { font-size: clamp(22px, 6vw, 34px); font-weight: 700; opacity: 1; color: #fff; }
.m-shot {
  border: 0.76px solid rgba(255,255,255,0.18); border-radius: 20px;
  padding: 8px 8px 0; margin-bottom: 22px; overflow: hidden; background: #01010a;
  opacity: 0; transform: translateY(40px);
  transition: opacity 0.7s cubic-bezier(0.22,1,0.36,1), transform 0.7s cubic-bezier(0.22,1,0.36,1);
}
.m-shot.in { opacity: 1; transform: translateY(0); }
.m-shot img { transition: transform 0.9s ease; }
.m-shot.in img { transform: scale(1); }
@media (prefers-reduced-motion: reduce) {
  .m-shot { opacity: 1; transform: none; transition: none; }
}
.m-shot img { width: 100%; aspect-ratio: 551/344; object-fit: cover; border-radius: 14px; }
.m-shot figcaption { font-size: 15px; color: rgba(255,255,255,0.7); line-height: 1.45; padding: 16px 6px 18px; }
.m-shot figcaption strong { color: #fff; font-weight: 900; }

/* testimonials — horizontal swipe/slide carousel on mobile & tablet */
.m-testimonials .m-grid {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 16px;
  padding: 4px 4px 12px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.m-testimonials .m-grid::-webkit-scrollbar { display: none; }
.m-testimonials .m-grid > .m-card {
  flex: 0 0 84%;
  max-width: 360px;
  scroll-snap-align: center;
}
.m-quote .stars { display: flex; margin: 12px 0 14px; }
.m-quote .stars img { width: 17px; height: 17px; }
.m-quote .avatar { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; }
.m-quote p.text { font-size: 15px; color: #bdbdbd; line-height: 1.55; margin: 12px 0 18px; }
.m-quote h4 { font-size: 21px; font-weight: 700; margin: 0 0 4px; }
.m-quote .role { font-size: 15px; font-weight: 700; color: #bdbdbd; }

/* how it works */
.m-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.m-step { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.m-step .node {
  width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 40%, rgba(134,72,221,0.55), rgba(94,0,208,0.2) 70%), #01010a;
  border: 1px solid rgba(255,255,255,0.18);
}
.m-step .node img { width: 28px; height: 28px; }
.m-step h4 { font-size: 18px; font-weight: 700; margin: 0; }
.m-step p { font-size: 16px; color: #bdbdbd; margin: 0; line-height: 1.35; }

/* cta */
.m-cta-block {
  position: relative; overflow: hidden; text-align: center;
  border: 0.5px solid #989898; border-radius: 40px; padding: clamp(40px,8vw,72px) var(--pad);
  background: radial-gradient(120% 80% at 50% 0%, rgba(94,0,208,0.25), transparent 60%), #01010a;
  display: flex; flex-direction: column; align-items: center; gap: 26px;
}
.m-cta-block h2 { font-size: clamp(24px, 6vw, 40px); font-weight: 700; margin: 0; max-width: 640px; }

/* footer */
.m-footer { background: #090909; padding: 56px var(--pad) 56px; }
.m-fbottom { padding-bottom: 8px; }
.m-footer .brand { font-family: 'Godber','Playfair Display',Georgia,serif; font-size: 32px; }
.m-footer .tag { font-size: 18px; font-weight: 700; max-width: 300px; margin: 16px 0 20px; }
.m-footer .socials { display: flex; gap: 12px; margin-bottom: 36px; }
.m-footer .socials a { width: 46px; height: 46px; border-radius: 26px; background: #1b1b1b; border: 0.877px solid #8e8e8e; display: grid; place-items: center; }
.m-footer .socials img { width: 20px; height: 20px; }
.m-fcols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px 20px; }
.m-fcol h5 { font-size: 15px; font-weight: 900; text-transform: uppercase; margin: 0 0 14px; }
.m-fcol a { display: block; font-size: 14px; color: #fff; opacity: 0.85; margin-bottom: 10px; }
.m-fbottom { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; margin-top: 40px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.12); color: #bdbdbd; font-size: 13px; }
.m-fbottom .legal { display: flex; gap: 24px; }

/* phone breakpoint */
@media (max-width: 640px) {
  .m-grid.cols3, .m-grid.cols2 { grid-template-columns: 1fr; }
  .m-steps { grid-template-columns: 1fr 1fr; row-gap: 34px; }
  .m-fcols { grid-template-columns: 1fr 1fr; }
  .m-hero .m-cta .m-btn { width: 100%; max-width: 320px; }
}
@media (max-width: 380px) {
  .m-steps { grid-template-columns: 1fr; }
  .m-fcols { grid-template-columns: 1fr; }
}