/* === Motion system (global, reused across sections) === */
:root{
  --mr-ease: cubic-bezier(.2,.8,.2,1);
  --mr-fx-dur: .18s;
  --mr-fx-lift: -2px;
  --mr-fx-glow: rgba(246,196,0,.18);
  --mr-fx-border: rgba(246,196,0,.32);
  --mr-reveal-dur: .45s;
}

.mr-reveal{
  opacity:0;
  transform: translateY(10px);
  transition: opacity var(--mr-reveal-dur) var(--mr-ease),
              transform var(--mr-reveal-dur) var(--mr-ease);
  transition-delay: var(--mr-reveal-delay, 0ms);
  will-change: opacity, transform;
}
.mr-reveal.is-in{
  opacity:1;
  transform:none;
}

@media (prefers-reduced-motion: reduce){
  .mr-reveal{
    opacity:1;
    transform:none;
    transition:none;
    transition-delay:0ms;
  }
}

.mr-header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(11,11,12,.82);
  border-bottom:1px solid var(--mr-border);
  backdrop-filter: blur(10px);
}
.mr-header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 16px;
}
.mr-brand{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color:var(--mr-text);
}
.mr-logo{
  border-radius:12px;
  box-shadow: var(--mr-shadow);
}
.mr-brand-text{display:flex; flex-direction:column; gap:2px;}
.mr-brand-name{font-weight:800; letter-spacing:.3px;}
.mr-brand-sub{font-size:12px; color:var(--mr-muted);}

.mr-nav{
  display:flex;
  align-items:center;
  gap:14px;
  font-size:14px;
}
.mr-nav-link{
  text-decoration:none;
  color:var(--mr-text);
  font-weight:600;
  font-size:14px;
  opacity:.9;
}
.mr-nav-link:hover{opacity:1;}

.mr-burger{
  display:none;
  width:44px;
  height:44px;
  align-items:center;
  justify-content:center;
  position:relative;
  background: rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .15s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.mr-burger:hover{
  background: rgba(255,255,255,.065);
  border-color: rgba(255,255,255,.16);
  box-shadow: 0 16px 40px rgba(0,0,0,.35);
}
.mr-burger:active{ transform: scale(.98); }
.mr-burger:focus-visible{
  outline: 2px solid rgba(241,196,15,.85);
  outline-offset: 3px;
}

.mr-burger-line{
  /*
    Pro hamburger icon (no weird offset/clipping on mobile):
    we place each bar absolutely, centered, and animate to an “X”.
  */
  position:absolute;
  left:50%;
  width:22px;
  height:2px;
  background:var(--mr-text);
  opacity:.92;
  border-radius:2px;
  transform: translateX(-50%);
  transition: transform .18s ease, top .18s ease, opacity .12s ease;
}

.mr-burger-line:nth-child(1){ top: calc(50% - 7px); }
.mr-burger-line:nth-child(2){ top: 50%; }
.mr-burger-line:nth-child(3){ top: calc(50% + 7px); }

.mr-burger.is-open .mr-burger-line:nth-child(1){ top: 50%; transform: translateX(-50%) rotate(45deg); }
.mr-burger.is-open .mr-burger-line:nth-child(2){ opacity:0; }
.mr-burger.is-open .mr-burger-line:nth-child(3){ top: 50%; transform: translateX(-50%) rotate(-45deg); }

.mr-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 14px;
  border-radius:14px;
  border:1px solid var(--mr-border);
  background:transparent;
  color:var(--mr-text);
  font-weight:800;
  text-decoration:none;
  cursor:pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
}
.mr-btn-primary{
  background: linear-gradient(180deg, rgba(246,196,0,.95), rgba(246,196,0,.75));
  color:#111;
  border-color: rgba(246,196,0,.55);
}
.mr-btn-ghost{
  background: rgba(255,255,255,.03);
}
.mr-btn:hover{transform: translateY(-1px);}

.mr-card{
  display:flex;
  gap:12px;
  padding:16px;
  border-radius:18px;
  border:1px solid var(--mr-border);
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
position:relative;
overflow:hidden;
transition: transform var(--mr-fx-dur) var(--mr-ease),
            box-shadow var(--mr-fx-dur) var(--mr-ease),
            border-color var(--mr-fx-dur) var(--mr-ease);
}
.mr-card-icon{width:44px;height:44px;flex:0 0 44px;display:grid;place-items:center;border-radius:14px;background:rgba(255,255,255,.03);border:1px solid var(--mr-border);color:var(--mr-yellow);
  transition: transform var(--mr-fx-dur) var(--mr-ease), box-shadow var(--mr-fx-dur) var(--mr-ease), border-color var(--mr-fx-dur) var(--mr-ease);
}
.mr-card-icon svg{width:22px;height:22px;display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.mr-card-icon .mr-icon{width:22px;height:22px;display:block;}
.mr-card-body{display:flex; flex-direction:column; gap:6px;}

.mr-grid-3{
  display:grid;
  gap:14px;
  grid-template-columns: repeat(3, minmax(0,1fr));
}


/* === Card micro-interactions (desktop hover + mobile tap) === */
.mr-card::before,
.mr-faq::before{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(520px circle at 20% 0%, rgba(246,196,0,.10), transparent 55%);
  opacity:.55;
  pointer-events:none;
}

@media (hover:hover){
  .mr-card:hover{
    transform: translateY(var(--mr-fx-lift));
    border-color: var(--mr-fx-border);
    box-shadow: 0 18px 46px rgba(0,0,0,.40), 0 0 0 1px var(--mr-fx-glow);
  }
  .mr-card:hover .mr-card-icon{
    border-color: rgba(246,196,0,.45);
    box-shadow: 0 0 22px rgba(246,196,0,.14);
    transform: scale(1.03);
  }

  .mr-faq:not([open]):hover{
    transform: translateY(var(--mr-fx-lift));
    border-color: var(--mr-fx-border);
    box-shadow: 0 18px 46px rgba(0,0,0,.35), 0 0 0 1px var(--mr-fx-glow);
  }
}

@media (hover:none){
  .mr-card:active{
    transform: translateY(1px) scale(.995);
    border-color: rgba(246,196,0,.28);
  }
  .mr-faq:active{
    transform: translateY(1px) scale(.998);
    border-color: rgba(246,196,0,.28);
  }
}
.mr-tag{
  display:inline-flex;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--mr-border);
  background: rgba(246,196,0,.06);
  font-size:12px;
  font-weight:800;
  color: var(--mr-text);
}
.mr-tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px;}

/* FAQ (reusable) */
.mr-faq-grid{display:grid; gap:10px;}
.mr-faq{border:1px solid var(--mr-border); background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)); border-radius:18px; overflow:hidden;
position:relative;
transition: transform var(--mr-fx-dur) var(--mr-ease),
            box-shadow var(--mr-fx-dur) var(--mr-ease),
            border-color var(--mr-fx-dur) var(--mr-ease);
}
.mr-faq[open]{box-shadow: 0 0 0 1px rgba(246,196,0,.22), 0 18px 40px rgba(0,0,0,.22);}
.mr-faq-q{
  list-style:none;
  cursor:pointer;
  padding:14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  font-weight:900;
}
.mr-faq-q::-webkit-details-marker{display:none;}
.mr-faq-q::after{content:""; width:10px; height:10px; border-right:2px solid rgba(255,255,255,.70); border-bottom:2px solid rgba(255,255,255,.70); transform: rotate(45deg); transition: transform .18s ease, border-color .18s ease; opacity:.9;}
.mr-faq[open] > .mr-faq-q::after{transform: rotate(225deg); border-color: rgba(246,196,0,.95);}
.mr-faq-q:hover{color: var(--mr-yellow);}
.mr-faq-a{padding:0 16px 16px; color: var(--mr-muted); line-height:1.55;}

@media (prefers-reduced-motion: reduce){
  .mr-faq-q::after{transition:none;}
}

.mr-thumb{
  display:block;
  border-radius:16px;
  overflow:hidden;
  border:1px solid var(--mr-border);
  background: rgba(255,255,255,.02);
}
.mr-thumb-img{
  display:block;
  width:100%;
  height:auto;
}

.mr-footer{
  padding:30px 0 40px;
  border-top:1px solid var(--mr-border);
}
.mr-footer-inner{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}
.mr-footer-left{display:flex; gap:12px; align-items:flex-start;}
.mr-footer-name{font-weight:900; margin-bottom:4px;}
.mr-footer-text{max-width:520px;}

.mr-lightbox{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background: rgba(0,0,0,.78);
  z-index:100;
}
.mr-lightbox.is-open{display:flex;}
.mr-lightbox-img{
  max-width:min(92vw, 980px);
  max-height:82vh;
  border-radius:18px;
  border:1px solid var(--mr-border);
  box-shadow: var(--mr-shadow);
  /* Drag/swipe support: JS moves this var while the user drags */
  transform: translateX(var(--mr-lb-drag, 0px));
  transition: opacity .22s ease, transform .22s ease;
  will-change: transform, opacity;
  touch-action: pan-y;
  -webkit-user-drag: none;
  user-select: none;
  z-index: 1;
}

/* Video support inside the same lightbox */
.mr-lightbox-video{
  max-width:min(92vw, 980px);
  max-height:82vh;
  border-radius:18px;
  border:1px solid var(--mr-border);
  box-shadow: var(--mr-shadow);
  background: rgba(0,0,0,.2);
  z-index: 1;
}
.mr-lightbox-close{
  position:absolute;
  top:18px;
  right:18px;
  width:44px;
  height:44px;
  border-radius:14px;
  border:1px solid var(--mr-border);
  background: rgba(255,255,255,.06);
  color:var(--mr-text);
  font-size:26px;
  cursor:pointer;
  z-index: 3;
}

.mr-lightbox-img.is-switching{
  opacity:0;
  transform: translateX(var(--mr-lb-shift, 0px)) scale(.985);
}

.mr-lightbox-img.is-dragging{
  transition:none;
  cursor:grabbing;
}
.mr-lightbox-nav{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  width:54px;
  height:54px;
  border-radius:16px;
  border:1px solid rgba(246,196,0,.35);
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(8px);
  color:var(--mr-yellow);
  font-size:34px;
  box-shadow: 0 10px 26px rgba(0,0,0,.45);
  cursor:pointer;
  z-index: 3;
}
.mr-lightbox-nav:hover{background: rgba(0,0,0,.58); border-color: rgba(246,196,0,.55);}
.mr-lightbox-nav:active{transform: translateY(-50%) scale(.98);}
.mr-lightbox-prev{left:18px;}
.mr-lightbox-next{right:18px;}

.mr-lightbox-counter{
  position:absolute;
  left:50%;
  bottom:18px;
  transform: translateX(-50%);
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(246,196,0,.28);
  background: rgba(0,0,0,.55);
  color:var(--mr-text);
  font-weight:800;
  font-size:13px;
  letter-spacing:.2px;
  box-shadow: 0 10px 26px rgba(0,0,0,.45);
  user-select:none;
  z-index: 3;
}

@media (max-width: 520px){
  .mr-lightbox-nav{width:48px; height:48px; font-size:32px; border-radius:15px;}
  .mr-lightbox-prev{left:12px;}
  .mr-lightbox-next{right:12px;}
  .mr-lightbox-counter{bottom:12px; font-size:12px; padding:7px 11px;}
}


/* --- Nav CTA sizing (keep it elegant) --- */
.mr-nav .mr-btn-primary{
  padding:9px 12px;
  border-radius:14px;
}
@media (max-width: 720px){
  .mr-nav .mr-btn-primary{
    align-self:flex-start; /* prevents full-width giant button in hamburger menu */
    width:auto;
  }
}


@media (max-width: 920px){
  .mr-grid-3{grid-template-columns: repeat(2, minmax(0,1fr));}
}

@media (max-width: 720px){
  .mr-burger{display:inline-flex;}

  /* Mobile menu: right-side drawer (not full width) */
  .mr-nav{
    position:absolute;
    top:64px;
    right:12px;
    left:auto;
    width:280px;
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 92px);
    overflow:auto;

    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:10px;
    padding:14px;

    border-radius:18px;
    border:1px solid var(--mr-border);
    background: rgba(11,11,12,.96);
    box-shadow: var(--mr-shadow);

    opacity:0;
    transform: translateX(12px);
    pointer-events:none;
    transition: transform .18s ease, opacity .18s ease;
  }
  .mr-nav.is-open{
    opacity:1;
    transform: none;
    pointer-events:auto;
  }

  .mr-grid-3{grid-template-columns: 1fr;}
  .mr-footer-inner{flex-direction:column;}
}

/* Extra-small phones: keep the drawer tight to the right and not too wide */
@media (max-width: 420px){
  .mr-nav{
    right:10px;
    width:250px;
    max-width: calc(100vw - 20px);
  }
}

/* --- Works thumbs (uniform, no stretch) --- */
.mr-thumbs{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
.mr-thumb{
  width:112px;
  height:112px;
  flex:0 0 auto;
  border-radius:16px;
  overflow:hidden;
}
.mr-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
@media (max-width: 520px){
  .mr-thumb{width:96px; height:96px;}
}