/* Moniex modular stylesheet — generated from the original cascade. */
@media(prefers-reduced-motion:reduce){.services-carousel .cards,.services-carousel .service-slide{transition:none!important}}
.services-carousel .service-slide{text-align:center !important}
.services-carousel .service-slide h3,.services-carousel .service-slide p{text-align:center !important}
.services-carousel .service-slide .service-art-wrap{margin-left:auto !important;margin-right:auto !important}
#how .steps{align-items:stretch}
#how .steps .step{height:400px;min-height:400px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:flex-start;text-align:center;background:rgba(255,255,255,.018);border:1px solid rgba(117,207,255,.14);overflow:hidden;isolation:isolate;transition:background .35s ease,border-color .35s ease,box-shadow .35s ease,transform .35s cubic-bezier(.22,1,.36,1)}
#how .steps .step p{max-height:none;margin:8px 0 0;padding:0;opacity:1;overflow:visible;transform:none;transition:color .3s ease}
#how .steps .step h3{margin:0;transform:none;transition:color .3s ease}
#how .steps .step-no{margin-bottom:14px;transition:transform .42s cubic-bezier(.22,1,.36,1),opacity .3s ease}
@media(hover:hover)and(pointer:fine){#how .steps .step:hover,#how .steps .step:focus-within{background:rgba(255,255,255,.055);border-color:rgba(117,207,255,.34);box-shadow:0 18px 42px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.045),0 0 28px rgba(22,136,255,.07);transform:translateY(-5px)!important} #how .steps .step:hover .step-no,#how .steps .step:focus-within .step-no{transform:translateY(-4px)} #how .steps .step:hover h3,#how .steps .step:focus-within h3{transform:none} #how .steps .step:hover p,#how .steps .step:focus-within p{max-height:none;margin-top:8px;opacity:1;transform:none}}
#how .steps .step:focus-visible{outline:2px solid rgba(40,169,255,.65);outline-offset:3px}
@media(max-width:1100px){#how .steps .step{height:auto;min-height:240px} #how .steps .step p{margin-top:8px} #how .steps .step h3{transform:none} #how .steps .step-no{transform:none}}
@media(max-width:720px){#how .steps .step{height:auto;min-height:230px;padding:22px 18px} #how .steps .step-no{margin-bottom:12px}}
#how .video-cta{margin-top:46px;position:relative;z-index:2}
@media(max-width:720px){#how .video-cta{margin-top:26px}}
@media(prefers-reduced-motion:reduce){#how .steps .step,#how .steps .step-no,#how .steps .step h3,#how .steps .step p{transition:none !important}}
#how .steps .step{position:relative;padding:0 !important;background:rgba(255,255,255,.018);overflow:hidden;isolation:isolate}
#how .step-media{position:relative;height:200px;flex:0 0 200px;overflow:hidden;border-bottom:1px solid rgba(117,207,255,.10);background:linear-gradient(180deg,rgba(7,18,34,.24),rgba(7,18,34,.72))}
#how .step-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,10,20,.06)0%,rgba(4,10,20,.20)58%,rgba(4,10,20,.52)100%);pointer-events:none}
#how .step-media img{width:100%;height:100%;display:block;object-fit:cover;object-position:center top;opacity:.85;filter:saturate(.95)brightness(.95);transform:scale(1.025);transition:opacity .45s ease,filter .45s ease,transform .55s cubic-bezier(.22,1,.36,1)}
#how .step-content{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center;flex:1;padding:14px 18px 16px}
#how .steps .step h3{max-width:100%}
@media(hover:hover)and(pointer:fine){#how .steps .step:hover .step-media img,#how .steps .step:focus-within .step-media img{opacity:1;filter:saturate(1)brightness(1.02);transform:scale(1.055)}}
@media(max-width:1100px){#how .step-media{height:176px;flex-basis:176px} #how .step-content{padding:14px 16px 16px}}
@media(max-width:720px){#how .step-media{height:240px;flex-basis:240px} #how .step-content{padding:15px 16px 18px}}
#services .section-head{position:relative;z-index:5}
.moniex-arcflow{position:relative;width:100%;height:590px;margin-top:10px;overflow:hidden;user-select:none;-webkit-user-select:none;isolation:isolate}
.moniex-arcflow-stage{position:absolute;inset:0;overflow:hidden;cursor:grab;outline:none;touch-action:pan-y}
.moniex-arcflow-stage.is-dragging{cursor:grabbing}
.moniex-arcflow-disc{position:absolute;left:50%;top:0;transform:translateX(-50%);border-radius:50%;background:transparent;pointer-events:none}
.moniex-arcflow-slots{position:absolute;inset:0;pointer-events:none}
.moniex-arcflow-card{position:absolute;top:0;left:0;overflow:hidden;border:1px solid rgba(130,185,255,.18);border-radius:20px;background:#03296e;box-shadow:0 22px 45px -14px rgba(0,0,0,.58),0 2px 9px rgba(0,0,0,.24);will-change:transform;backface-visibility:hidden;transform-origin:center center;pointer-events:auto}
.moniex-arcflow-card-inner{position:relative;width:100%;height:100%;overflow:hidden;opacity:1;transform:translate3d(0,0,0);transition:transform .85s cubic-bezier(.22,1,.36,1),opacity .85s ease;transition-delay:var(--enter-delay,0ms)}
.moniex-arcflow-card img{display:block;width:100%;height:100%;object-fit:cover;object-position:center center;background:linear-gradient(180deg,#0a49b8,#02296f 60%,#011a4f);padding:0;box-sizing:border-box;pointer-events:none;user-select:none;-webkit-user-drag:none}
.moniex-arcflow-card::after{display:none !important;content:none !important}
.moniex-arcflow-copy{position:absolute;inset:auto 0 0;z-index:2;padding:24px 22px 40px;color:#fff;text-align:center;transform:translateY(16px);opacity:0;transition:transform .3s ease,opacity .3s ease;pointer-events:none}
.moniex-arcflow-card:hover .moniex-arcflow-copy,.moniex-arcflow-card:focus-within .moniex-arcflow-copy{transform:translateY(0);opacity:1}
.moniex-arcflow-copy h3{margin:0;color:#fff;font-size:22px;font-weight:800;line-height:1.45;text-shadow:0 1px 4px rgba(0,0,0,.35)}
.moniex-arcflow-copy p{margin:9px auto 0;max-width:30ch;color:#fff;font-size:15.5px;line-height:1.85;text-shadow:0 1px 4px rgba(0,0,0,.35)}
.moniex-arcflow-card.is-entering .moniex-arcflow-card-inner{opacity:0;transform:translate3d(0,50px,0)}
.moniex-arcflow-hint{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);font-size:11px;color:rgba(170,190,215,.48);pointer-events:none;opacity:0;transition:opacity .25s ease}
.moniex-arcflow:hover .moniex-arcflow-hint{opacity:1}
@media(max-width:900px),(hover:none)and(pointer:coarse){.moniex-arcflow{height:430px;margin-top:0} .moniex-arcflow-stage{touch-action:pan-y} .moniex-arcflow-card{border-radius:16px} .moniex-arcflow-copy{transform:none;opacity:1;padding:15px 13px 14px;background:transparent} .moniex-arcflow-card::after{display:none !important} .moniex-arcflow-copy h3{font-size:15px} .moniex-arcflow-copy p{font-size:11.5px;line-height:1.75} .moniex-arcflow-hint{display:none}}
/* iPad landscape / large touch tablets: phone style, taller stage so bigger cards fit */
@media(min-width:901px)and(hover:none)and(pointer:coarse){.moniex-arcflow{height:520px}}
@media(prefers-reduced-motion:reduce){.moniex-arcflow-card-inner,.moniex-arcflow-copy{transition:none!important}}
#how .how-method-title{display:flex;align-items:center;justify-content:center;gap:10px;margin:2px auto 18px;color:#cfe8ff;font-size:13px;font-weight:800;letter-spacing:.2px}
#how .how-method-title::before,#how .how-method-title::after{content:"";height:1px;flex:1;max-width:150px;background:linear-gradient(90deg,transparent,rgba(92,200,255,.35))}
#how .how-method-title::after{transform:scaleX(-1)}
#how .how-method-title span{padding:7px 14px;border:1px solid rgba(92,200,255,.18);border-radius:999px;background:rgba(22,136,255,.055)}
#how .how-method-title-second{margin-top:44px}
#how .how-steps-method{margin-bottom:0}
@media(max-width:720px){#how .how-method-title{margin-top:4px;margin-bottom:16px;font-size:12px} #how .how-method-title-second{margin-top:30px} #how .how-method-title::before,#how .how-method-title::after{max-width:78px}}
.header-actions{display:flex;align-items:center;gap:9px}
.about-section-head{margin-bottom:22px}
.calculator-section-head{text-align:center;margin-bottom:26px}
.centered-section-head{margin-inline:auto;text-align:center}

@media(prefers-reduced-motion:reduce){.live-activity,.live-activity *{animation:none!important;transition:none!important}.moniex-arcflow-card,.moniex-arcflow-card-inner,.moniex-arcflow-copy{transition:none!important;animation:none!important}}
.menu:focus-visible,.faq-q:focus-visible,.calc-mode:focus-visible,.video-modal-close:focus-visible,.moniex-arcflow-stage:focus-visible{outline:2px solid rgba(92,200,255,.85);outline-offset:3px}


/* Compact Services section */
#services{
  padding-top:68px;
  padding-bottom:58px;
}
#services .section-head{
  margin-bottom:28px;
}
#services .moniex-arcflow{
  height:500px;
  margin-top:0;
}
@media(max-width:720px){
  #services{
    padding-top:48px;
    padding-bottom:42px;
  }
  #services .section-head{
    margin-bottom:20px;
  }
  #services .moniex-arcflow{
    height:430px;
  }
}

/* Calculator + service-fee alignment refinement */
@media (min-width: 721px){
  #calculator .calculator-section-head{
    margin-inline: auto;
    text-align: center;
  }
}

/* Service-fee note: align exactly with the three fee cards above */
#service-fees .service-fee-note{
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  font-size: 15px;
  line-height: 2;
  padding-inline: 20px;
}

@media (max-width: 720px){
  #service-fees .service-fee-note{
    font-size: 13.5px;
    padding-inline: 15px;
  }
}


/* Service-fee note: warning icon next to the text */
#service-fees .service-fee-note{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
#service-fees .service-fee-note-icon{
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
}
#service-fees .service-fee-note-text{
  min-width: 0;
}
@media (max-width: 720px){
  #service-fees .service-fee-note{ gap: 9px; }
  #service-fees .service-fee-note-icon{ width: 20px; height: 20px; }
}

/* ===== How-it-works step cards: compact text so every description is fully visible ===== */
#how .steps .step{height:auto;min-height:400px}
#how .steps .step-content{padding:12px 14px 16px}
#how .steps .step-no{font-size:11px;margin-bottom:10px}
#how .steps .step h3{font-size:14px;line-height:1.6}
#how .steps .step p{font-size:12px;line-height:1.85;margin-top:6px;overflow-wrap:anywhere}
@media(max-width:1100px){
  #how .steps .step{min-height:0}
  #how .steps .step p{font-size:12.5px}
}
@media(max-width:720px){
  #how .steps .step{min-height:0}
  #how .steps .step-content{padding:12px 14px 16px}
  #how .steps .step h3{font-size:14px}
  #how .steps .step p{font-size:12.5px;line-height:1.9}
}

/* ===== Final CTA ("برای شروع، وارد ربات مانیکس شوید."): fluid, balanced title + stable buttons ===== */
.cta-box > div:first-child{min-width:0}
.cta-box .actions{flex:0 0 auto}
.cta-box h2{line-height:1.5;text-wrap:balance;overflow-wrap:break-word}
/* keep the brand phrase together; with text-wrap:balance the remaining words split evenly, and without it a lone word still can't be orphaned from the brand name */
.cta-box h2 .nowrap{white-space:nowrap}
.cta-box p{text-wrap:pretty;line-height:1.9}
@media(max-width:720px){
  .cta-box h2{font-size:clamp(23px,6.4vw,32px)}
  .cta-box .actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:20px}
  .cta-box .actions .btn{min-width:0;width:100%;padding:0 10px;text-align:center;line-height:1.5}
}
