/* ═══════════════════════════════════════════════════════════════════════════
   MUNIMO — the visual layer. Depth, motion and real product imagery.
   Everything here is transform/opacity driven and reduced-motion safe.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────── ambient aurora backdrop ───────────────────────── */
.aurora{position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden;background:var(--ink)}
.aurora i{position:absolute;display:block;border-radius:50%;filter:blur(110px);opacity:.5;
          will-change:transform}
.aurora i:nth-child(1){width:58vw;height:58vw;top:-22vw;left:-10vw;
  background:radial-gradient(circle,rgba(18,185,129,.30),transparent 66%);animation:drift1 26s ease-in-out infinite}
.aurora i:nth-child(2){width:46vw;height:46vw;top:14vw;right:-14vw;
  background:radial-gradient(circle,rgba(233,187,82,.16),transparent 66%);animation:drift2 32s ease-in-out infinite}
.aurora i:nth-child(3){width:52vw;height:52vw;bottom:-24vw;left:22vw;
  background:radial-gradient(circle,rgba(52,211,153,.16),transparent 68%);animation:drift3 38s ease-in-out infinite}
@keyframes drift1{50%{transform:translate3d(8vw,6vw,0) scale(1.14)}}
@keyframes drift2{50%{transform:translate3d(-9vw,8vw,0) scale(1.1)}}
@keyframes drift3{50%{transform:translate3d(6vw,-7vw,0) scale(1.16)}}
/* fine grid + grain so flat areas still have texture */
.aurora::after{content:'';position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.021) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.021) 1px,transparent 1px);
  background-size:58px 58px;
  mask-image:radial-gradient(ellipse 90% 70% at 50% 0%,#000 20%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 0%,#000 20%,transparent 78%)}

/* ─────────────────────────── hero product deck ──────────────────────────── */
/* The real software, tilted into the page, floating cards in front. Follows
   the cursor a few degrees so it feels like an object rather than a picture. */
.deck{position:relative;perspective:2000px;margin-top:clamp(26px,3.2vw,42px);
      transform-style:preserve-3d}
.deck-glow{position:absolute;left:50%;top:14%;width:78%;height:74%;transform:translateX(-50%);
  background:radial-gradient(ellipse,rgba(18,185,129,.34),transparent 66%);filter:blur(76px);
  pointer-events:none;z-index:0}
.deck-stage{position:relative;transform-style:preserve-3d;
  transform:rotateX(var(--rx,11deg)) rotateY(var(--ry,0deg)) translateZ(0);
  transition:transform .5s cubic-bezier(.22,1,.36,1)}
.deck-main{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--hair2);
  box-shadow:0 60px 120px rgba(0,0,0,.72),0 0 0 1px rgba(255,255,255,.045) inset,
             0 0 90px rgba(18,185,129,.15);
  background:#070b0a;transform-style:preserve-3d}
.deck-main img{width:100%;display:block}
/* floating phone */
.deck-phone{position:absolute;right:-2%;bottom:-13%;width:clamp(112px,13.5%,182px);z-index:6;
  border-radius:22px;overflow:hidden;background:#04110b;border:1px solid #2c3c34;padding:5px;
  box-shadow:0 42px 80px rgba(0,0,0,.8),0 0 0 4px #070b0a,0 0 60px rgba(18,185,129,.2);
  transform:translateZ(90px) rotate(3deg)}
.deck-phone img{width:100%;display:block;border-radius:17px}
/* floating detail card */
.deck-chip{position:absolute;z-index:7;background:rgba(12,20,17,.93);border:1px solid var(--hair3);
  border-radius:14px;padding:13px 17px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 26px 60px rgba(0,0,0,.7);min-width:156px}
.deck-chip .k{font-size:9.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--f)}
.deck-chip .v{font-size:20px;font-weight:800;letter-spacing:-.02em;margin-top:5px}
.deck-chip .s{font-size:11px;color:var(--m);font-weight:600;margin-top:2px}
.deck-chip.a{left:-4%;top:16%;transform:translateZ(120px) rotate(-3deg);animation:float1 7s ease-in-out infinite}
.deck-chip.b{left:-1%;bottom:4%;transform:translateZ(66px) rotate(2deg);animation:float2 9s ease-in-out infinite}
@keyframes float1{50%{transform:translateZ(120px) rotate(-3deg) translateY(-13px)}}
@keyframes float2{50%{transform:translateZ(66px) rotate(2deg) translateY(11px)}}
@media(max-width:900px){
  .deck-stage{transform:none}
  .deck-chip.a,.deck-chip.b{display:none}
  .deck-phone{right:-3%;bottom:-9%;width:23%}
}

/* ──────────────────────────── client marquee ────────────────────────────── */
.marq{position:relative;overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 11%,#000 89%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 11%,#000 89%,transparent)}
.marq-track{display:flex;width:max-content;animation:slide 42s linear infinite}
.marq:hover .marq-track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.marq-item{display:flex;align-items:center;gap:13px;padding:0 clamp(22px,3vw,44px);flex-shrink:0}
.marq-item b{font-size:clamp(15px,1.7vw,19px);font-weight:800;letter-spacing:-.02em;color:var(--t);white-space:nowrap}
.marq-item span{font-size:12px;color:var(--f);font-weight:700;white-space:nowrap}
.marq-dot{width:5px;height:5px;border-radius:50%;background:var(--em);flex-shrink:0;opacity:.65}

/* ───────────────────────── sticky product tour ──────────────────────────── */
/* Text scrolls on the left; the real screen on the right swaps to match. */
.tour{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(30px,5vw,72px);align-items:start}
@media(max-width:940px){.tour{grid-template-columns:1fr}}
.tour-steps{display:grid;gap:clamp(42px,8vh,84px);padding:7vh 0}
@media(max-width:940px){.tour-steps{padding:0;gap:34px}}
.tour-step{opacity:.32;transition:opacity .45s var(--ease);cursor:pointer}
.tour-step.on{opacity:1}
.tour-step h3{font-size:clamp(21px,2.7vw,30px);font-weight:800;letter-spacing:-.02em;line-height:1.16}
.tour-step p{color:var(--m);font-size:15.5px;margin-top:12px}
.tour-step .n{display:inline-flex;align-items:center;justify-content:center;width:27px;height:27px;
  border-radius:8px;background:rgba(18,185,129,.1);border:1px solid rgba(18,185,129,.3);
  font-size:11.5px;font-weight:800;color:var(--em2);margin-bottom:14px;font-family:var(--mono)}
.tour-vis{position:sticky;top:13vh;perspective:1800px}
@media(max-width:940px){.tour-vis{position:relative;top:0;margin-bottom:26px;order:-1}}
.tour-frame{position:relative;border-radius:15px;overflow:hidden;border:1px solid var(--hair2);
  background:#070b0a;box-shadow:0 50px 100px rgba(0,0,0,.66),0 0 70px rgba(18,185,129,.1);
  transform:rotateY(-4deg) rotateX(3deg)}
@media(max-width:940px){.tour-frame{transform:none}}
.tour-frame img{width:100%;display:block;grid-area:1/1;opacity:0;transition:opacity .55s var(--ease),transform .7s var(--ease);transform:scale(1.03)}
.tour-frame img.on{opacity:1;transform:none}
.tour-imgs{display:grid}
.tour-imgs>img{grid-area:1/1}

/* ──────────────────────────── bento grid ───────────────────────────────── */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(13px,1.5vw,18px)}
@media(max-width:940px){.bento{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.bento{grid-template-columns:1fr}}
.bx{position:relative;background:linear-gradient(162deg,var(--surface),var(--ink2));
  border:1px solid var(--hair);border-radius:19px;overflow:hidden;
  transition:transform .38s var(--ease),border-color .38s,box-shadow .38s;display:flex;flex-direction:column}
.bx:hover{transform:translateY(-4px);border-color:var(--hair3);box-shadow:0 26px 60px rgba(0,0,0,.55)}
.bx{min-height:clamp(330px,34vw,400px)}
.bx-3{grid-column:span 3}.bx-2{grid-column:span 2}.bx-4{grid-column:span 4}.bx-6{grid-column:span 6}
@media(max-width:940px){.bx-3,.bx-2,.bx-4,.bx-6{grid-column:span 1}}
@media(max-width:940px){.bx-wide{grid-column:span 2}}
@media(max-width:600px){.bx-wide{grid-column:span 1}}
.bx-body{padding:clamp(20px,2.4vw,28px);position:relative;z-index:2}
.bx-body h3{font-size:clamp(18px,2.1vw,22px);font-weight:800;letter-spacing:-.018em}
.bx-body p{color:var(--m);font-size:14.5px;margin-top:9px}
/* The shot is a cropped window onto the real screen, not the whole image —
   without a fixed height the 940px-tall captures blow the grid apart. */
.bx-shot{position:relative;margin:auto 0 0 clamp(20px,2.4vw,28px);border-radius:12px 0 0 0;
  overflow:hidden;border:1px solid var(--hair2);border-right:0;border-bottom:0;
  height:clamp(146px,15vw,196px);flex:none}
.bx-shot img{width:100%;height:100%;object-fit:cover;object-position:top left;display:block;
  transition:transform .6s var(--ease)}
.bx-shot.portrait img{object-fit:contain;object-position:center top;background:#0a1210}
.bx:hover .bx-shot img{transform:scale(1.045)}
.bx-shot::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(11,16,14,.55))}
.bx-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:15px}
.bx-arrow{margin-top:16px;font-size:14px;font-weight:700;color:var(--em2);display:inline-flex;gap:7px;
  transition:gap .25s var(--ease)}
.bx:hover .bx-arrow{gap:12px}

/* ─────────────────────────── testimonial cards ──────────────────────────── */
.tcards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.7vw,20px);align-items:start}
@media(max-width:1000px){.tcards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:660px){.tcards{grid-template-columns:1fr}}
.tc{position:relative;background:linear-gradient(160deg,var(--surface),var(--ink2));
  border:1px solid var(--hair);border-radius:18px;padding:clamp(21px,2.3vw,27px);overflow:hidden;
  transition:transform .35s var(--ease),border-color .35s,box-shadow .35s}
.tc:hover{transform:translateY(-4px);border-color:var(--hair3);box-shadow:0 24px 56px rgba(0,0,0,.5)}
.tc::before{content:'';position:absolute;width:210px;height:150px;top:-64px;right:-52px;
  background:radial-gradient(ellipse,rgba(233,187,82,.13),transparent 66%);pointer-events:none}
.tc-stars{display:flex;gap:2.5px;margin-bottom:14px;position:relative}
.tc-stars svg{width:15px;height:15px;fill:var(--gold)}
.tc-q{font-size:15.5px;font-weight:500;line-height:1.58;color:var(--t);position:relative}
.tc-ft{display:flex;align-items:center;gap:12px;margin-top:20px;padding-top:17px;
  border-top:1px solid var(--hair);position:relative}
.tc-av{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:14px;color:#04110b;flex-shrink:0;letter-spacing:-.02em}
.tc-n{font-weight:800;font-size:14.5px;line-height:1.25}
.tc-c{color:var(--m);font-size:12.5px;margin-top:1px}
.tc-what{margin-top:14px;padding-top:13px;border-top:1px solid var(--hair);font-size:12.5px;
  color:var(--f);position:relative;line-height:1.5}
.tc-what b{color:var(--em2);font-weight:700}
.tc-feat{grid-column:span 2}
@media(max-width:1000px){.tc-feat{grid-column:span 2}}
@media(max-width:660px){.tc-feat{grid-column:span 1}}
.tc-feat .tc-q{font-size:clamp(17px,2vw,21px);font-weight:600;line-height:1.5;letter-spacing:-.012em}

/* ───────────────────────── figure / screenshot frame ────────────────────── */
.figure{position:relative;border-radius:15px;overflow:hidden;border:1px solid var(--hair2);
  box-shadow:0 40px 90px rgba(0,0,0,.6);background:#070b0a}
.figure img{width:100%;display:block}
.figure-cap{font-size:12.5px;color:var(--f);font-weight:600;margin-top:13px;text-align:center}
.tilt{transition:transform .5s var(--ease)}
.tilt:hover{transform:perspective(1400px) rotateY(-3deg) rotateX(2deg) translateY(-5px)}

/* ─────────────────────────────── stat band ──────────────────────────────── */
.band{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--hair);
  border:1px solid var(--hair);border-radius:18px;overflow:hidden}
@media(max-width:820px){.band{grid-template-columns:repeat(2,1fr)}}
.band>div{background:var(--ink2);padding:clamp(22px,2.6vw,30px);text-align:center}
.band .bv{font-size:clamp(25px,3.2vw,38px);font-weight:800;letter-spacing:-.028em;line-height:1}
.band .bl{font-size:13px;color:var(--m);margin-top:9px;font-weight:600}

@media(prefers-reduced-motion:reduce){
  .aurora i{animation:none}
  .deck-chip.a,.deck-chip.b{animation:none}
  .marq-track{animation:none}
  .tour-step{opacity:1}
  .tour-frame img{opacity:0}
  .tour-frame img.on{opacity:1}
}