.elementor-2 .elementor-element.elementor-element-d8be396{--display:flex;--min-height:100vh;}.elementor-2 .elementor-element.elementor-element-f793e35{margin:-11px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}body.elementor-page-2:not(.elementor-motion-effects-element-type-background), body.elementor-page-2 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#000000;}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-bcbbc47 *//* =========================================================
   MAHLERN ACADEMY — STUDENT STORIES  |  STYLE v4
   Cinematic · Editorial · Mobile-safe
========================================================= */

.mhlx-stories{
  --bg:#030303;
  --bg-2:#0a0806;
  --ink:#f8f4ec;

  --gold:#e9cd92;
  --gold-lite:#f8e6bb;
  --gold-deep:#9a7228;
  --bronze:#c08c46;
  --warm:#d89b55;

  --muted:#b2a897;
  --muted-2:#8d8577;

  --line:rgba(233,205,146,.16);
  --line-2:rgba(233,205,146,.30);

  --r-lg:28px;
  --r-md:20px;

  --fa:'Vazirmatn','IRANYekanX',system-ui,sans-serif;
  --en:'Outfit','Inter',system-ui,sans-serif;

  --ease:cubic-bezier(.22,1,.36,1);

  position:relative;
  isolation:isolate;
  overflow:hidden;

  background:
    radial-gradient(120% 70% at 50% -8%, rgba(233,205,146,.10), transparent 46%),
    linear-gradient(180deg,#050403 0%, var(--bg) 40%, #020202 100%);

  color:var(--ink);
  font-family:var(--fa);

  padding:clamp(88px,9.5vw,168px) 0 clamp(76px,8vw,132px);

  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.mhlx-stories *,
.mhlx-stories *::before,
.mhlx-stories *::after{ box-sizing:border-box; }

/* خط طلایی لبه بالای سکشن */
.mhlx-stories::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:1px;
  z-index:4;
  background:linear-gradient(90deg, transparent, rgba(233,205,146,.55), transparent);
}

.mhlx-inner{
  position:relative;
  z-index:3;
  width:100%;
  max-width:1420px;
  margin-inline:auto;
  padding-inline:clamp(18px,4vw,54px);
}


/* =========================================================
   BACKGROUND
========================================================= */

.mhlx-bg{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:1;
  contain:strict;
}

.mhlx-beam{ position:absolute; filter:blur(72px); opacity:.44; }

.mhlx-beam--gold{
  top:-24%; right:-16%;
  width:72%; height:94%;
  background:linear-gradient(140deg, rgba(233,205,146,.36), transparent 66%);
  transform:rotate(15deg);
}

.mhlx-beam--warm{
  bottom:-24%; left:-16%;
  width:64%; height:74%;
  background:linear-gradient(40deg, rgba(216,155,85,.26), transparent 66%);
}

.mhlx-orb{ position:absolute; border-radius:50%; filter:blur(98px); }

.mhlx-orb--a{
  top:16%; right:16%;
  width:min(430px,46vw); height:min(430px,46vw);
  background:radial-gradient(circle, rgba(233,205,146,.19), transparent 70%);
}

.mhlx-orb--b{
  bottom:6%; left:6%;
  width:min(370px,41vw); height:min(370px,41vw);
  background:radial-gradient(circle, rgba(216,155,85,.14), transparent 70%);
}

.mhlx-academy-lines{
  position:absolute;
  inset:0;
  opacity:.34;
  background:linear-gradient(118deg, transparent 20%, rgba(233,205,146,.13), transparent 80%);
  animation:mhlxDrift 24s linear infinite;
}

@keyframes mhlxDrift{
  from{ transform:translate3d(-18%,0,0); }
  to  { transform:translate3d(18%,0,0);  }
}

.mhlx-particles{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:.85;
}

.mhlx-fog{
  position:absolute;
  inset:auto 0 0 0;
  height:38%;
  background:linear-gradient(to top, rgba(2,2,2,.97), transparent);
}

.mhlx-vignette{
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse at center, transparent 32%, rgba(0,0,0,.80));
}

.mhlx-grain{
  position:absolute;
  inset:-50%;
  opacity:.032;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.8'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}


/* =========================================================
   INTRO
========================================================= */

.mhlx-intro{
  text-align:center;
  max-width:940px;
  margin-inline:auto;
}

.mhlx-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:12px;
  margin:0;
  padding:9px 20px;
  border:1px solid var(--line);
  border-radius:100px;
  background:linear-gradient(180deg, rgba(233,205,146,.08), rgba(255,255,255,.015));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 10px 34px -22px rgba(233,205,146,.6);
  font-family:var(--en);
  font-size:11px;
  letter-spacing:.22em;
  color:var(--gold-lite);
  direction:ltr;
}

.mhlx-eb-line{
  width:26px; height:1px;
  background:linear-gradient(90deg, transparent, rgba(233,205,146,.6));
}

.mhlx-eb-line:last-child{
  background:linear-gradient(90deg, rgba(233,205,146,.6), transparent);
}

.mhlx-dot{
  width:6px; height:6px;
  border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 14px var(--gold);
  animation:mhlxPulse 2.4s ease-in-out infinite;
}

@keyframes mhlxPulse{
  50%{ transform:scale(1.45); opacity:.45; }
}

.mhlx-title{
  margin:32px 0 0;
  font-size:clamp(31px,5.1vw,66px);
  font-weight:900;
  line-height:1.44;
  letter-spacing:-.012em;
  color:#fff;
  text-wrap:balance;
}

.mhlx-gold{
  display:inline-block;
  color:var(--gold-lite);
  background:linear-gradient(100deg,#8f671f 0%,#f8e6bb 42%,#e9cd92 66%,#b0812f 100%);
  -webkit-background-clip:text;
  background-clip:text;
}

@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .mhlx-gold{ color:transparent; }
}

.mhlx-sub{
  margin:26px auto 0;
  max-width:670px;
  font-size:clamp(14px,1.6vw,18px);
  line-height:2.15;
  color:var(--muted);
}

.mhlx-hairline{
  display:block;
  position:relative;
  width:min(460px,82%);
  height:1px;
  margin:44px auto 0;
  overflow:hidden;
}

.mhlx-hairline i{
  display:block;
  width:100%;
  height:100%;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
}


/* =========================================================
   STAGE
========================================================= */

.mhlx-stage{
  position:relative;
  margin-top:clamp(58px,7.2vw,104px);
}

.mhlx-track{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(16px,2.5vw,36px);
}

.mhlx-card{
  position:relative;
  flex:0 0 auto;
}

.mhlx-card--hero{ width:52%; order:2; z-index:3; }
.mhlx-card--side{ width:21%; z-index:2; }

/* آفست ادیتوریال با margin تا با پارالاکس GSAP تداخل نکند */
.mhlx-card--s1{ order:1; margin-top:56px; }
.mhlx-card--s2{ order:3; margin-bottom:56px; }


/* =========================================================
   MEDIA FRAME
========================================================= */

.mhlx-media{
  position:relative;
  overflow:hidden;
  border-radius:var(--r-lg);
  background:#080706;
  border:1px solid rgba(233,205,146,.15);
  box-shadow:
    0 44px 108px -44px rgba(0,0,0,.96),
    inset 0 1px 0 rgba(255,255,255,.04);
  transition:transform .6s var(--ease),
             box-shadow .6s ease,
             border-color .6s ease;
}

/* هاله نور داخلی */
.mhlx-media::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:5;
  pointer-events:none;
  border-radius:inherit;
  box-shadow:
    inset 0 0 0 1px rgba(233,205,146,.10),
    inset 0 44px 76px -54px rgba(255,255,255,.30);
}

.mhlx-card--hero .mhlx-media{
  aspect-ratio:16/9;
  border-color:rgba(233,205,146,.34);
  box-shadow:
    0 58px 130px -46px rgba(233,205,146,.22),
    0 32px 84px -40px #000,
    inset 0 1px 0 rgba(255,255,255,.05);
}

.mhlx-card--side .mhlx-media{ aspect-ratio:9/16; }

/* فالبک iOS قدیمی بدون پشتیبانی aspect-ratio */
@supports not (aspect-ratio:1/1){
  .mhlx-card--hero .mhlx-media{ height:0; padding-bottom:56.25%; }
  .mhlx-card--side .mhlx-media{ height:0; padding-bottom:177%; }
}

/* فریم گرادیانی طلایی — فقط دسکتاپ توانمند */
.mhlx-rich .mhlx-card--hero .mhlx-media::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:6;
  border-radius:inherit;
  padding:1px;
  pointer-events:none;
  background:linear-gradient(150deg,
    rgba(248,230,187,.75) 0%,
    rgba(233,205,146,.12) 32%,
    transparent 55%,
    rgba(192,140,70,.45) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite:exclude;
}


/* =========================================================
   CORNER MARKS
========================================================= */

.mhlx-corner{
  position:absolute;
  width:26px; height:26px;
  z-index:7;
  pointer-events:none;
  border:1px solid rgba(233,205,146,.55);
  opacity:.85;
  transition:opacity .45s ease, inset .5s var(--ease);
}

.mhlx-corner--tl{ top:16px; left:16px;  border-right:0; border-bottom:0; border-radius:6px 0 0 0; }
.mhlx-corner--tr{ top:16px; right:16px; border-left:0;  border-bottom:0; border-radius:0 6px 0 0; }
.mhlx-corner--bl{ bottom:16px; left:16px;  border-right:0; border-top:0; border-radius:0 0 0 6px; }
.mhlx-corner--br{ bottom:16px; right:16px; border-left:0;  border-top:0; border-radius:0 0 6px 0; }

.mhlx-card.is-playing .mhlx-corner{ opacity:0; }


/* =========================================================
   VIDEO
========================================================= */

.mhlx-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  background:#070605;
  opacity:0;
  transition:opacity .5s ease;
}

.mhlx-card.is-playing .mhlx-video{ opacity:1; }


/* =========================================================
   PROGRESS (لبه بالا — با کنترل بومی تداخل ندارد)
========================================================= */

.mhlx-progress{
  position:absolute;
  top:0; left:0; right:0;
  height:2px;
  z-index:9;
  background:rgba(255,255,255,.07);
  opacity:0;
  pointer-events:none;
  transition:opacity .35s ease;
}

.mhlx-progress i{
  display:block;
  width:100%;
  height:100%;
  transform:scaleX(0);
  transform-origin:left center;   /* ویدیو LTR است */
  background:linear-gradient(90deg,#9a7228,#f8e6bb);
  box-shadow:0 0 12px rgba(233,205,146,.5);
}

.mhlx-card.is-playing .mhlx-progress{ opacity:1; }


/* =========================================================
   POSTER
========================================================= */

.mhlx-poster{
  position:absolute;
  inset:0;
  z-index:2;
  overflow:hidden;
  transition:opacity .6s ease, transform .9s var(--ease);
}

.mhlx-poster::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.90)),
    radial-gradient(circle at 50% 34%, rgba(233,205,146,.27), transparent 40%),
    linear-gradient(120deg,#1a150e,#040404);
}

/* خط نور صحنه */
.mhlx-poster::after{
  content:"";
  position:absolute;
  left:50%; top:50%;
  width:66%; height:1px;
  transform:translate(-50%,-50%);
  background:linear-gradient(90deg, transparent, rgba(233,205,146,.9), transparent);
  box-shadow:0 0 40px rgba(233,205,146,.48);
}

.mhlx-poster--hero::after{ width:44%; }

.mhlx-poster--a::before{
  background:
    linear-gradient(180deg, rgba(0,0,0,.14), rgba(0,0,0,.92)),
    radial-gradient(circle at 30% 32%, rgba(233,205,146,.22), transparent 36%),
    linear-gradient(135deg,#17130c,#040404);
}

.mhlx-poster--b::before{
  background:
    linear-gradient(180deg, rgba(0,0,0,.14), rgba(0,0,0,.92)),
    radial-gradient(circle at 70% 40%, rgba(233,205,146,.22), transparent 36%),
    linear-gradient(135deg,#141009,#040404);
}

.mhlx-card.is-playing .mhlx-poster{ opacity:0; }


/* =========================================================
   SCRIM
========================================================= */

.mhlx-scrim{
  position:absolute;
  inset:0;
  z-index:3;
  background:linear-gradient(to top,
    rgba(0,0,0,.95) 2%,
    rgba(0,0,0,.55) 28%,
    rgba(0,0,0,.18) 48%,
    transparent 66%);
  transition:opacity .45s ease;
}

.mhlx-card.is-playing .mhlx-scrim{ opacity:0; pointer-events:none; }


/* =========================================================
   BADGE
========================================================= */

.mhlx-badge{
  position:absolute;
  top:20px; right:20px;
  z-index:8;
  padding:7px 15px;
  border:1px solid rgba(233,205,146,.26);
  border-radius:100px;
  background:rgba(0,0,0,.44);
  -webkit-backdrop-filter:blur(8px);
          backdrop-filter:blur(8px);
  font-family:var(--en);
  font-size:10px;
  letter-spacing:.2em;
  color:var(--gold-lite);
  direction:ltr;
  transition:opacity .4s ease, transform .4s var(--ease);
}

.mhlx-badge--gold{
  top:auto; bottom:20px; right:20px;
  background:linear-gradient(180deg, rgba(233,205,146,.20), rgba(0,0,0,.62));
  border-color:rgba(233,205,146,.44);
  box-shadow:0 10px 34px -14px rgba(233,205,146,.5);
}

.mhlx-card.is-playing .mhlx-badge{ opacity:0; transform:translateY(-6px); }


/* =========================================================
   PLAY BUTTON
========================================================= */

.mhlx-play{
  position:absolute;
  top:50%; left:50%;
  translate:-50% -50%;
  width:68px; height:68px;
  display:grid;
  place-items:center;
  padding:0;
  border-radius:50%;
  border:1px solid rgba(233,205,146,.44);
  background:
    radial-gradient(circle at 50% 26%, rgba(233,205,146,.24), rgba(9,9,9,.74) 72%);
  box-shadow:
    0 20px 48px -18px rgba(0,0,0,.92),
    inset 0 1px 0 rgba(255,255,255,.10);
  cursor:pointer;
  z-index:9;
  transition:transform .4s var(--ease),
             border-color .4s ease,
             box-shadow .4s ease,
             opacity .35s ease;
}

.mhlx-play--lg{ width:94px; height:94px; }

.mhlx-play svg{
  width:22px; height:22px;
  fill:var(--gold-lite);
  transform:scaleX(-1);            /* جهت آیکن در RTL */
  margin-inline-start:2px;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.6));
}

.mhlx-play--lg svg{ width:29px; height:29px; }

.mhlx-ring{
  position:absolute;
  inset:-3px;
  border-radius:50%;
  border:1px solid rgba(233,205,146,.5);
  pointer-events:none;
  animation:mhlxRing 3.6s ease-out infinite;
}

@keyframes mhlxRing{
  0%  { transform:scale(1);    opacity:.55; }
  70% { opacity:0; }
  100%{ transform:scale(1.6);  opacity:0; }
}

.mhlx-card.is-playing .mhlx-play{ opacity:0; pointer-events:none; }


/* =========================================================
   LOADER
========================================================= */

.mhlx-loader{
  position:absolute;
  top:50%; left:50%;
  translate:-50% -50%;
  width:36px; height:36px;
  border-radius:50%;
  border:2px solid rgba(233,205,146,.20);
  border-top-color:var(--gold);
  opacity:0;
  z-index:10;
  pointer-events:none;
  transition:opacity .3s ease;
}

.mhlx-card.is-loading .mhlx-loader{
  opacity:1;
  animation:mhlxSpin .9s linear infinite;
}

@keyframes mhlxSpin{ to{ rotate:360deg; } }


/* =========================================================
   CAPTION
========================================================= */

.mhlx-caption{
  position:absolute;
  inset:auto 0 0 0;
  z-index:8;
  padding:clamp(20px,2.3vw,36px);
  transition:opacity .4s ease, transform .6s var(--ease);
}

.mhlx-card--hero .mhlx-caption{ padding-bottom:clamp(58px,4.6vw,74px); }

.mhlx-name{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin-bottom:11px;
  font-size:13px;
  font-weight:700;
  letter-spacing:.01em;
  color:var(--gold);
}

.mhlx-name::before{
  content:"";
  width:18px; height:1px;
  background:var(--gold);
  opacity:.75;
}

.mhlx-c-title{
  margin:0;
  font-size:clamp(17px,2vw,28px);
  font-weight:900;
  line-height:1.56;
  color:#fff;
  text-shadow:0 2px 18px rgba(0,0,0,.6);
}

.mhlx-card--hero .mhlx-c-title{
  font-size:clamp(22px,2.7vw,35px);
  letter-spacing:-.008em;
}

.mhlx-c-text{
  margin:11px 0 0;
  font-size:clamp(12px,1.2vw,15px);
  line-height:2.05;
  color:#d4cbbc;
}

.mhlx-card.is-playing .mhlx-caption{
  opacity:0;
  transform:translateY(14px);
  pointer-events:none;
}

.mhlx-under{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin:28px auto 0;
  font-size:15px;
  font-style:italic;
  color:#dcc9a0;
}

.mhlx-under i{
  width:clamp(24px,4vw,54px);
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(233,205,146,.55));
}

.mhlx-under i:last-child{
  background:linear-gradient(90deg, rgba(233,205,146,.55), transparent);
}


/* =========================================================
   HOVER — فقط دسکتاپ با ماوس
========================================================= */

@media (hover:hover) and (pointer:fine){

  .mhlx-card:not(.is-playing):hover .mhlx-media{
    transform:translateY(-9px);
    border-color:rgba(233,205,146,.48);
    box-shadow:
      0 60px 130px -46px rgba(233,205,146,.28),
      0 32px 84px -40px #000;
  }

  .mhlx-card:not(.is-playing):hover .mhlx-poster{ transform:scale(1.045); }

  .mhlx-card:not(.is-playing):hover .mhlx-corner{ inset:10px; opacity:1; }
  .mhlx-card:not(.is-playing):hover .mhlx-corner--tl{ inset:10px auto auto 10px; }
  .mhlx-card:not(.is-playing):hover .mhlx-corner--tr{ inset:10px 10px auto auto; }
  .mhlx-card:not(.is-playing):hover .mhlx-corner--bl{ inset:auto auto 10px 10px; }
  .mhlx-card:not(.is-playing):hover .mhlx-corner--br{ inset:auto 10px 10px auto; }

  .mhlx-play:hover{
    transform:scale(1.08);
    border-color:rgba(248,230,187,.85);
    box-shadow:
      0 24px 64px -20px rgba(233,205,146,.55),
      inset 0 1px 0 rgba(255,255,255,.16);
  }

}


/* =========================================================
   BRAND STATEMENT
========================================================= */

.mhlx-statement{
  position:relative;
  text-align:center;
  margin-top:clamp(88px,10vw,164px);
}

.mhlx-st-line{
  display:block;
  width:1px;
  height:clamp(44px,5vw,88px);
  margin:0 auto 32px;
  background:linear-gradient(to bottom, transparent, var(--gold), transparent);
}

.mhlx-monogram{
  display:grid;
  place-items:center;
  width:54px; height:54px;
  margin:0 auto 34px;
  border:1px solid var(--line-2);
  border-radius:50%;
  font-family:var(--en);
  font-size:20px;
  font-weight:700;
  letter-spacing:.02em;
  color:var(--gold-lite);
  background:linear-gradient(180deg, rgba(233,205,146,.10), rgba(0,0,0,.4));
  box-shadow:0 14px 44px -22px rgba(233,205,146,.7);
}

.mhlx-count{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:clamp(10px,2vw,22px);
  direction:ltr;
}

.mhlx-count-rule{
  flex:0 0 auto;
  width:clamp(28px,7vw,110px);
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(233,205,146,.5));
}

.mhlx-count-rule:last-child{
  background:linear-gradient(90deg, rgba(233,205,146,.5), transparent);
}

.mhlx-count-num,
.mhlx-count-plus{
  font-family:var(--en);
  color:var(--gold-lite);
  background:linear-gradient(170deg,#fff4d6 0%,#e9cd92 46%,#8f671f 100%);
  -webkit-background-clip:text;
  background-clip:text;
  line-height:.9;
}

@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .mhlx-count-num,
  .mhlx-count-plus{ color:transparent; }
}

.mhlx-count-num{
  font-size:clamp(66px,11vw,150px);
  font-weight:800;
  letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;
}

.mhlx-count-plus{
  align-self:flex-start;
  font-size:clamp(32px,5vw,62px);
  margin-top:.18em;
}

.mhlx-count-label{
  margin:28px 0 0;
  font-size:clamp(16px,2vw,24px);
  font-weight:800;
  color:#fff;
}

.mhlx-note{
  margin:20px auto 0;
  max-width:650px;
  font-size:clamp(13px,1.5vw,17px);
  line-height:2.15;
  color:var(--muted-2);
}

.mhlx-sign{
  display:block;
  margin-top:58px;
  font-family:var(--en);
  font-size:12px;
  letter-spacing:.44em;
  color:rgba(233,205,146,.55);
  direction:ltr;
}


/* =========================================================
   DOTS
========================================================= */

.mhlx-dots{
  display:none;
  justify-content:center;
  gap:10px;
  margin-top:30px;
}

.mhlx-dot-btn{
  width:8px; height:8px;
  padding:0;
  border:0;
  border-radius:20px;
  background:rgba(233,205,146,.30);
  cursor:pointer;
  transition:width .38s var(--ease), background .38s ease;
}

.mhlx-dot-btn.is-on{
  width:32px;
  background:linear-gradient(90deg,#9a7228,#f8e6bb);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width:1024px) and (min-width:781px){

  .mhlx-track{ flex-wrap:wrap; gap:24px; }

  .mhlx-card--hero{ width:100%; order:1; }
  .mhlx-card--side{ width:calc(50% - 12px); }

  .mhlx-card--s1{ order:2; margin-top:0; }
  .mhlx-card--s2{ order:3; margin-bottom:0; }

  .mhlx-card--side .mhlx-media{ aspect-ratio:4/5; }

  @supports not (aspect-ratio:1/1){
    .mhlx-card--side .mhlx-media{ padding-bottom:125%; }
  }

}


/* =========================================================
   MOBILE — سبک‌سازی بار گرافیکی
========================================================= */

@media (max-width:780px){

  .mhlx-stories{ padding-top:74px; }

  .mhlx-inner{ padding-inline:0; }
  .mhlx-intro{ padding-inline:22px; }

  .mhlx-title{ font-size:clamp(27px,7.6vw,39px); line-height:1.5; }
  .mhlx-sub{ font-size:14px; line-height:2; }

  .mhlx-eyebrow{ gap:9px; padding:8px 16px; font-size:10px; }
  .mhlx-eb-line{ width:16px; }

  .mhlx-track{
    justify-content:flex-start;
    align-items:center;
    gap:16px;
    padding:8px 7vw 16px;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
  }

  .mhlx-track::-webkit-scrollbar{ display:none; }

  .mhlx-card{
    scroll-snap-align:center;
    scroll-snap-stop:always;
    margin:0 !important;
  }

  .mhlx-card--hero{ width:86vw; flex-basis:86vw; }
  .mhlx-card--side{ width:74vw; flex-basis:74vw; }

  .mhlx-card--side .mhlx-media{ aspect-ratio:4/5; }

  @supports not (aspect-ratio:1/1){
    .mhlx-card--side .mhlx-media{ padding-bottom:125%; }
  }

  .mhlx-media{
    border-radius:var(--r-md);
    box-shadow:0 22px 48px -18px rgba(0,0,0,.88);
    transition:none;
  }

  .mhlx-media::after{ box-shadow:inset 0 0 0 1px rgba(233,205,146,.10); }

  .mhlx-corner{ width:18px; height:18px; }
  .mhlx-corner--tl{ top:12px; left:12px; }
  .mhlx-corner--tr{ top:12px; right:12px; }
  .mhlx-corner--bl{ bottom:12px; left:12px; }
  .mhlx-corner--br{ bottom:12px; right:12px; }

  .mhlx-caption{ padding:20px; }
  .mhlx-card--hero .mhlx-caption{ padding-bottom:56px; }
  .mhlx-c-title{ font-size:18px; }
  .mhlx-c-text{ font-size:12.5px; }

  .mhlx-under{ padding-inline:26px; font-size:14px; }

  .mhlx-dots{ display:flex; }

  /* حذف بار سنگین رندر — علت کرش اندروید */
  .mhlx-grain,
  .mhlx-particles{ display:none; }

  .mhlx-academy-lines{ opacity:.14; animation:none; }

  .mhlx-beam{ filter:blur(30px); opacity:.30; }
  .mhlx-orb{ filter:blur(48px); opacity:.70; }

  .mhlx-badge{
    -webkit-backdrop-filter:none;
            backdrop-filter:none;
    background:rgba(0,0,0,.60);
  }

  .mhlx-ring{ animation:none; opacity:.32; }

  .mhlx-play{
    width:60px; height:60px;
    background:rgba(8,8,8,.80);
  }

  .mhlx-play--lg{ width:78px; height:78px; }

  .mhlx-monogram{ width:46px; height:46px; font-size:17px; margin-bottom:28px; }
  .mhlx-count-rule{ width:22px; }
  .mhlx-sign{ letter-spacing:.28em; margin-top:46px; }

}


/* دستگاه کم‌توان — کلاس از JS اضافه می‌شود */
.mhlx-stories.mhlx-lite .mhlx-particles,
.mhlx-stories.mhlx-lite .mhlx-grain{ display:none; }
.mhlx-stories.mhlx-lite .mhlx-academy-lines{ animation:none; }


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width:390px){

  .mhlx-card--hero{ width:90vw; flex-basis:90vw; }
  .mhlx-card--side{ width:78vw; flex-basis:78vw; }

  .mhlx-play--lg{ width:68px; height:68px; }
  .mhlx-count-num{ font-size:66px; }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion:reduce){

  .mhlx-stories *,
  .mhlx-stories *::before,
  .mhlx-stories *::after{
    animation:none !important;
    transition:none !important;
  }

  .mhlx-particles{ display:none; }

}


/* =========================================================
   ACCESSIBILITY
========================================================= */

.mhlx-play:focus-visible,
.mhlx-dot-btn:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:5px;
}

.mhlx-video:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:-2px;
}/* End custom CSS */