:root{
  --bg:#0B0908; --bg-2:#0F0C0A;
  --surface:#151110; --surface-2:#1B1614; --elev:#221B18;
  --ink:#F5EEE5; --ink-2:#C8BBB0; --muted:#8A7C71; --muted-2:#5A5048;
  --line:#282120; --line-2:#3A302C;
  --red:#E23A4A; --red-deep:#A81A2A; --red-soft:#FF6B7A;
  --red-glow:rgba(226,58,74,.32);
  --pad:clamp(1.1rem,4.5vw,2.5rem);
  --disp:'Fraunces',Georgia,serif;
  --body:'Inter',system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',monospace;
}

/* ─── m-cta-bar — hidden by default (desktop) ─────────── */
.m-cta-bar{
  display:none;
}

*{margin:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
body{background:var(--bg);color:var(--ink);font-family:var(--body);line-height:1.75;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;letter-spacing:-.005em;max-width:100vw}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{list-style:none;padding:0}
::selection{background:var(--red);color:#fff}
:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:6px}
section[id]{scroll-margin-top:84px}

body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(760px 560px at 88% 6%, rgba(226,58,74,.10), transparent 62%),
             radial-gradient(680px 520px at 8% 92%, rgba(214,161,94,.05), transparent 62%)}
body::after{content:"";position:fixed;inset:0;z-index:120;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}

.container{max-width:1240px;margin-inline:auto;padding-inline:var(--pad);overflow:visible}
.prog{position:fixed;top:0;left:0;right:0;height:2.5px;background:var(--red);z-index:80;
  transform:scaleX(0);transform-origin:left;pointer-events:none;box-shadow:0 0 14px var(--red-glow)}

[data-reveal]{opacity:0;transform:translateY(26px);
  transition:opacity .7s ease,transform .85s cubic-bezier(.22,1,.36,1);transition-delay:var(--d,0s)}
[data-reveal].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){[data-reveal]{opacity:1;transform:none;transition:none}*{animation-duration:.001s!important}}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;font-weight:700;font-size:.98rem;
  padding:.9rem 1.7rem;border-radius:999px;border:1.5px solid transparent;cursor:pointer;
  transition:transform .15s ease,background .25s,border-color .25s,color .25s,box-shadow .3s;white-space:nowrap}
.btn svg{width:18px;height:18px;flex:none}
.btn:active{transform:scale(.96)}
.btn-red{background:var(--red);color:#fff;box-shadow:0 10px 30px -12px var(--red-glow)}
.btn-red:hover{background:var(--red-deep)}
.btn-ghost{border-color:var(--line-2);color:var(--ink-2);background:rgba(255,255,255,.015)}
.btn-ghost:hover{border-color:var(--red);color:var(--ink);box-shadow:0 0 24px -8px var(--red-glow)}

/* ═══════════════════════════════════════════════════════════
   HEADER — revised typography (header_fix.py)
   ═══════════════════════════════════════════════════════════ */

.hd{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:60;
  height:72px;
  transition:background .3s ease, border-color .3s ease, backdrop-filter .3s ease;
}
.hd.is-scrolled{
  background:rgba(11,9,8,.78);
  backdrop-filter:blur(16px) saturate(1.2);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);
  border-bottom:1px solid var(--line);
}
.hd__in{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:72px;
  gap:2rem;
}

/* padding-top روی main برای جبران هدر fixed */
main#top{
  padding-top:72px;
}

@media (max-width:819px){
  .hd{ height:60px; }
  .hd__in{ height:60px; }
  main#top{ padding-top:60px; }
}

  display:flex;
  align-items:center;
  justify-content:space-between;
  height:72px;
  gap:2rem;
}
.logo{
  font-family:var(--disp);
  font-weight:600;
  font-size:1.65rem;
  line-height:1;
  display:inline-flex;
  align-items:center;
  gap:.42rem;
  color:var(--ink);
  letter-spacing:-.005em;
}
.logo svg{
  width:.6em;
  height:.6em;
  color:var(--red);
  filter:drop-shadow(0 0 8px var(--red-glow));
}
.nav{
  display:none;
  gap:1.9rem;
  align-items:center;
}
.nav a{
  font-family:var(--body);
  font-size:.95rem;
  font-weight:500;
  color:var(--ink-2);
  letter-spacing:0;
  position:relative;
  padding:0;
  line-height:1;
  transition:color .25s;
}
.nav a::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-6px;
  height:1px;
  background:var(--red);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .28s cubic-bezier(.22,1,.36,1);
}
.nav a:hover{
  color:var(--ink);
}
.nav a:hover::after{
  transform:scaleX(1);
}

/* CTA — always the brightest element in header */
.hd__cta{
  display:none;
  padding:.72rem 1.5rem;
  font-size:.92rem;
  font-weight:600;
  letter-spacing:0;
  box-shadow:0 12px 34px -12px var(--red-glow),
             0 0 0 1px rgba(255,255,255,.04) inset;
}
.hd__cta:hover{
  box-shadow:0 14px 40px -10px var(--red-glow),
             0 0 0 1px rgba(255,255,255,.08) inset;
}

@media (min-width:1024px){
  .nav{ display:flex }
  .hd__cta{ display:inline-flex }
}

.burger{width:44px;height:44px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.burger span{width:22px;height:2px;background:var(--ink);border-radius:2px;transition:transform .3s}
.burger.is-open span:first-child{transform:translateY(4px) rotate(45deg)}
.burger.is-open span:last-child{transform:translateY(-4px) rotate(-45deg)}
@media (min-width:1024px){.burger{display:none}}

.mmenu{position:fixed;inset:0;z-index:50;background:rgba(11,9,8,.96);backdrop-filter:blur(14px);
  display:flex;flex-direction:column;justify-content:space-between;padding:110px var(--pad) 2.2rem;
  opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s}
.mmenu.is-open{opacity:1;visibility:visible}
.mmenu nav{display:flex;flex-direction:column;gap:.2rem}
.mmenu nav a{font-family:var(--disp);font-weight:500;font-size:1.9rem;line-height:1.55;display:flex;align-items:baseline;gap:1rem;
  color:var(--ink);opacity:0;transform:translateY(18px);transition:opacity .4s,transform .5s cubic-bezier(.22,1,.36,1)}
.mmenu.is-open nav a{opacity:1;transform:none}
.mmenu nav a:nth-child(2){transition-delay:.05s}.mmenu nav a:nth-child(3){transition-delay:.1s}
.mmenu nav a:nth-child(4){transition-delay:.15s}.mmenu nav a:nth-child(5){transition-delay:.2s}.mmenu nav a:nth-child(6){transition-delay:.25s}
.mmenu nav a i{font-family:var(--mono);font-style:normal;font-size:.72rem;color:var(--red)}
.mmenu nav a:hover{color:var(--red-soft)}
.mmenu__foot{display:flex;align-items:center;justify-content:space-between;gap:1rem;border-top:1px solid var(--line);padding-top:1.4rem}
.mmenu__foot p{font-size:.85rem;color:var(--muted)}

.kicker{display:flex;align-items:center;gap:.65rem;font-weight:600;font-size:.82rem;color:var(--red-soft);letter-spacing:.04em;text-transform:uppercase}
.kicker::before{content:"";width:1.6rem;height:2px;background:currentColor;border-radius:2px;box-shadow:0 0 10px var(--red-glow)}
.sec{padding-block:clamp(4rem,11vw,7rem);position:relative}
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;margin-bottom:1.7rem}
.head h2{font-family:var(--disp);font-weight:600;font-size:clamp(2.1rem,6vw,3.4rem);line-height:1.2;margin-top:.5rem;color:var(--ink);letter-spacing:-.02em}
.head__sub{color:var(--muted);font-size:.98rem;max-width:34rem;margin-top:.4rem}
.railnav{display:flex;gap:.55rem;flex:none;padding-bottom:.6rem}
.railnav button{width:42px;height:42px;border-radius:50%;border:1px solid var(--line-2);color:var(--muted);
  display:flex;align-items:center;justify-content:center;transition:border-color .25s,color .25s,box-shadow .25s}
.railnav button:hover{border-color:var(--red);color:var(--red-soft);box-shadow:0 0 20px -6px var(--red-glow)}
.railnav svg{width:18px;height:18px}

.hero{padding-block:clamp(1.8rem,6vh,4rem) 3rem;position:relative;overflow:hidden}
.hero__grid{display:grid;gap:2.8rem;align-items:center}
@media (min-width:960px){.hero__grid{grid-template-columns:1.05fr .95fr;gap:4.5rem}}
.hero h1{font-family:var(--disp);font-weight:600;font-size:clamp(2.5rem,8vw,4.6rem);line-height:1.08;margin-top:1rem;color:var(--ink);letter-spacing:-.03em}

.hero__lead{color:var(--ink-2);font-size:1.05rem;max-width:34rem;margin-top:1rem}
.hero__btns{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.9rem}
.chips{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.6rem}
.chip{display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--line);border-radius:999px;
  background:rgba(255,255,255,.02);padding:.4rem .95rem;font-size:.83rem;font-weight:500;color:var(--ink-2);transition:border-color .25s}
.chip:hover{border-color:var(--line-2)}
.chip svg{width:15px;height:15px;color:var(--red-soft);flex:none}

.ba-wrap{position:relative}
.halo{position:absolute;top:2%;left:-8%;width:112%;aspect-ratio:1;border-radius:50%;z-index:0;
  background:radial-gradient(circle,var(--red-glow) 0%,transparent 62%);filter:blur(30px);pointer-events:none}
.halo--2{top:auto;bottom:-14%;left:auto;right:-12%;width:52%;
  background:radial-gradient(circle,rgba(214,161,94,.14) 0%,transparent 65%)}
.ba{--pos:50%;position:relative;z-index:1}
.ba__frame{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--surface);
  border:1px solid var(--line-2);border-radius:clamp(130px,32vw,270px) clamp(130px,32vw,270px) 28px 28px;
  cursor:default;touch-action:pan-y;user-select:none;-webkit-user-select:none;
  box-shadow:0 40px 100px -40px rgba(0,0,0,.9),0 0 80px -30px var(--red-glow)}
.ba__frame:focus-visible,.mini:focus-visible{outline-offset:-5px}
.ba__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.ba__before{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.ba__line{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;background:var(--red);pointer-events:none;box-shadow:0 0 14px var(--red-glow)}
.ba__handle{position:absolute;top:50%;left:var(--pos);transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;
  background:var(--red);color:#fff;display:flex;align-items:center;justify-content:center;
  pointer-events:auto;touch-action:none;cursor:ew-resize;
  box-shadow:0 8px 30px var(--red-glow),0 0 0 1px rgba(255,255,255,.14) inset}
.ba__handle svg{width:22px;height:22px}
.ba:not(.touched) .ba__handle{animation:breathe 2.2s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.16)}}
.ba__tag{position:absolute;bottom:16px;font-size:.78rem;font-weight:700;border-radius:999px;padding:.25rem .85rem;z-index:2;pointer-events:none;letter-spacing:.03em;text-transform:uppercase}
.ba__tag--b{left:16px;background:rgba(11,9,8,.7);color:var(--ink);border:1px solid var(--line-2)}
.ba__tag--a{right:16px;background:var(--red);color:#fff}

}
.ba__foot{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:1rem;position:relative;z-index:1}
.ba__foot span{display:flex;align-items:center;gap:.5rem;font-size:.86rem;color:var(--muted)}
.ba__foot span svg{width:13px;height:13px;color:var(--red);flex:none}
.ba__foot em{font-style:normal;font-family:var(--mono);font-size:.65rem;letter-spacing:.1em;color:var(--muted-2)}

}

.mq{padding-block:1.2rem;margin-top:1.5rem}
.mq__band{background:linear-gradient(90deg,var(--red-deep) 0%,var(--red) 50%,var(--red-deep) 100%);color:#fff;overflow:hidden;
  box-shadow:0 0 60px -10px var(--red-glow)}
.mq__track{display:flex;gap:2.2rem;width:max-content;padding-block:.8rem;animation:mq 30s linear infinite}
.mq:hover .mq__track{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-33.3333%)}}
.mq__item{display:flex;align-items:center;gap:2.2rem;font-family:var(--disp);font-weight:500;font-size:clamp(1.05rem,2.5vw,1.4rem);white-space:nowrap}
.mq__item svg{width:11px;height:11px;flex:none;opacity:.85}

.srv{display:grid;grid-template-columns:auto 1fr;gap:.4rem 1.2rem;align-items:start;
  padding:1.8rem 1rem;border-top:1px solid var(--line);border-radius:20px;
  transition:background .35s,box-shadow .35s;position:relative}
.srv:last-of-type{border-bottom:1px solid var(--line)}
.srv__num{font-family:var(--disp);font-weight:600;font-size:1.7rem;line-height:1.2;color:var(--red);min-width:3rem}
.srv h3{font-size:1.2rem;font-weight:700;color:var(--ink)}
.srv p{color:var(--muted);font-size:.96rem;max-width:42rem;margin-top:.25rem}
.tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.9rem}
.tags span{border:1px solid var(--line);border-radius:999px;padding:.2rem .8rem;font-size:.74rem;color:var(--muted)}
.srv__go{display:none}
@media (min-width:760px){
  .srv{grid-template-columns:auto 1fr auto;align-items:center;padding:2.1rem 1.4rem}
  .srv__go{display:flex;width:52px;height:52px;border-radius:50%;border:1px solid var(--line-2);align-items:center;justify-content:center;color:var(--muted)}
  .srv__go svg{width:20px;height:20px;transition:transform .35s}
}
.srv:hover{background:linear-gradient(90deg,rgba(226,58,74,.07),rgba(226,58,74,.015) 55%,transparent)}
.srv:hover .srv__num{color:var(--red-soft)}
.srv:hover h3{color:#fff}
.srv:hover .srv__go{border-color:var(--red);color:var(--red-soft)}
.srv:hover .srv__go svg{transform:translateX(4px)}

.rail{display:flex;gap:1.1rem;overflow-x:auto;scroll-snap-type:x mandatory;align-items:flex-start;
  padding:var(--pad) var(--pad) .6rem;margin-inline:calc(var(--pad) * -1);scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail>*{scroll-snap-align:start}
.railBar{position:relative;height:2px;background:var(--line);border-radius:2px;margin-top:1.3rem}
.railBar i{position:absolute;top:0;left:0;height:100%;background:var(--red);border-radius:2px;min-width:40px}

.zone-paper2{background:var(--bg-2);border-block:1px solid var(--line)}
.filters{display:flex;flex-wrap:wrap;gap:.55rem;margin:-.3rem 0 1.2rem}
.filters button{border:1px solid var(--line-2);border-radius:999px;background:rgba(255,255,255,.015);
  padding:.5rem 1.15rem;font-size:.85rem;font-weight:600;color:var(--muted);transition:all .25s}
.filters button:hover{border-color:var(--red);color:var(--red-soft)}
.filters button.on{background:var(--red);border-color:var(--red);color:#fff}

.gcard{flex:0 0 clamp(250px,66vw,310px);transition:transform .45s cubic-bezier(.22,1,.36,1)}
@media (min-width:820px){.gcard{flex-basis:var(--w,280px)}}
.gcard:hover{transform:translateY(-6px)}
.gcard.is-hidden{display:none}
.mini{--pos:50%;position:relative;aspect-ratio:var(--ar,4/5);border-radius:18px;overflow:hidden;border:1px solid var(--line-2);
  background:var(--surface);cursor:default;touch-action:pan-x pan-y;user-select:none;-webkit-user-select:none;
  box-shadow:0 24px 50px -30px rgba(0,0,0,.9);transition:box-shadow .35s}
.gcard:hover .mini{box-shadow:0 30px 60px -30px rgba(0,0,0,.9),0 0 60px -20px var(--red-glow)}
.mini img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.mini__before{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.mini__line{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;background:var(--red);pointer-events:auto;touch-action:none;cursor:ew-resize;box-shadow:0 0 12px var(--red-glow)}
.mini__handle{position:absolute;top:50%;left:var(--pos);transform:translate(-50%,-50%);width:38px;height:38px;border-radius:50%;
  background:var(--red);color:#fff;display:flex;align-items:center;justify-content:center;
  pointer-events:auto;touch-action:none;cursor:ew-resize;-webkit-tap-highlight-color:transparent}
.mini__handle svg{width:19px;height:19px}
.mini:not(.touched) .mini__handle{animation:breathe2 2.2s ease-in-out infinite}
@keyframes breathe2{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.16)}}
.mini__tag{position:absolute;top:10px;font-size:.68rem;font-weight:700;border-radius:999px;padding:.15rem .65rem;pointer-events:none;z-index:2;letter-spacing:.03em;text-transform:uppercase}
.mini__tag--b{left:10px;background:rgba(11,9,8,.7);color:var(--ink);border:1px solid var(--line-2)}
.mini__tag--a{right:10px;background:var(--red);color:#fff}
.gcard__cap{display:flex;align-items:baseline;gap:.6rem;margin-top:.85rem}
.gcard__cap i{font-style:normal;font-family:var(--mono);font-size:.68rem;color:var(--red-soft)}
.gcard__cap h3{font-size:1rem;font-weight:700;color:var(--ink)}
.gcard__cap2{font-size:.8rem;color:var(--muted);margin-top:.05rem}
.empty-state{color:var(--muted);font-size:.9rem;padding:2rem 1rem;text-align:center;flex:0 0 100%}
.empty-state a{color:var(--red-soft);text-decoration:underline}

.zone-dark{background:#070605;color:var(--ink);border-block:1px solid var(--line);position:relative;overflow:hidden}
.zone-dark::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(800px 500px at 50% 120%, rgba(226,58,74,.10), transparent 65%)}
.zone-dark .container{position:relative}
.vcard{flex:0 0 clamp(220px,56vw,260px);transition:transform .45s cubic-bezier(.22,1,.36,1)}
.vcard:hover{transform:translateY(-6px)}
.vcard__img{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:9/16;border:1px solid var(--line-2);background:var(--surface);
  box-shadow:0 24px 50px -30px rgba(0,0,0,.9);transition:box-shadow .35s}
.vcard:hover .vcard__img{box-shadow:0 30px 60px -30px rgba(0,0,0,.9),0 0 60px -20px var(--red-glow)}
.vcard__img img,.vcard__img video{width:100%;height:100%;object-fit:cover;transition:transform .7s ease;display:block}
.vcard:hover .vcard__img img{transform:scale(1.06)}
.vcard__scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(5,3,3,.92),rgba(5,3,3,0) 48%)}
.vcard__play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:56px;height:56px;border-radius:50%;
  background:var(--red);color:#fff;display:flex;align-items:center;justify-content:center;transition:transform .2s;z-index:2}
.vcard__play:hover{transform:translate(-50%,-50%) scale(1.1);background:var(--red-deep)}
.vcard__play svg{width:22px;height:22px}
.vcard__play .i-pause{display:none}
.vcard.playing .vcard__play .i-play{display:none}
.vcard.playing .vcard__play .i-pause{display:block}
.vcard__mute{position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:50%;background:rgba(11,9,8,.6);
  border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;color:#fff;z-index:2}
.vcard__mute svg{width:15px;height:15px}
.vcard__mute .i-on{display:none}
.vcard__mute.on .i-on{display:block}
.vcard__mute.on .i-off{display:none}
.vcard__dur{position:absolute;top:17px;left:14px;font-size:.72rem;font-weight:600;background:rgba(11,9,8,.7);
  border:1px solid var(--line-2);border-radius:999px;padding:.1rem .6rem;z-index:2}
.vcard__bar{position:absolute;bottom:0;left:0;right:0;height:3px;background:rgba(255,255,255,.12);z-index:2}
.vcard__bar i{display:block;height:100%;background:var(--red-soft);width:var(--p,30%)}
.vcard__cap{position:absolute;bottom:0;left:0;right:0;padding:1rem;z-index:2}
.vcard__cap h3{font-size:.98rem;font-weight:700;color:#fff}
.vcard__cap p{font-size:.76rem;color:rgba(255,255,255,.7)}

.mani{font-family:var(--disp);font-weight:600;font-size:clamp(2.2rem,7vw,4rem);line-height:1.12;margin-top:.6rem;max-width:54rem;color:var(--ink);letter-spacing:-.03em}
.mani mark{background:linear-gradient(135deg,var(--red),var(--red-deep));color:#fff;padding:0 .18em .04em;border-radius:.12em}
.lead{color:var(--ink-2);max-width:38rem;margin-top:1rem;font-size:1.02rem}
.subhead{display:flex;align-items:baseline;flex-wrap:wrap;gap:.7rem;font-family:var(--disp);font-weight:600;
  font-size:clamp(1.5rem,4vw,2.1rem);margin-top:3.6rem;color:var(--ink)}
.subhead small{font-family:var(--body);font-size:.82rem;font-weight:600;color:var(--muted)}

.steps{position:relative;display:grid;gap:2rem;margin-top:2.2rem}
.step{position:relative}
.step__n{width:48px;height:48px;border-radius:50%;background:var(--red);color:#fff;display:flex;align-items:center;justify-content:center;
  font-family:var(--disp);font-weight:600;font-size:1.35rem;line-height:1;
  box-shadow:0 0 0 6px rgba(226,58,74,.10)}
.step h3{font-size:1.05rem;font-weight:700;color:var(--ink)}
.step p{color:var(--muted);font-size:.92rem;margin-top:.15rem}
@media (max-width:879px){
  .steps::before{content:"";position:absolute;top:10px;bottom:10px;left:24px;border-left:2px dashed var(--line-2)}
  .step{padding-left:72px}
  .step__n{position:absolute;left:0;top:0}
}
@media (min-width:880px){
  .steps{grid-template-columns:repeat(4,1fr);gap:1.6rem}
  .steps::before{content:"";position:absolute;top:24px;left:24px;right:24px;border-top:2px dashed var(--line-2)}
}

.plans{display:grid;gap:1.2rem;margin-top:2rem}
@media (min-width:820px){.plans{grid-template-columns:repeat(3,1fr);gap:1.4rem}}
.plan{position:relative;border:1px solid var(--line-2);border-radius:22px;background:linear-gradient(160deg,var(--surface) 0%,var(--surface-2) 100%);
  padding:2rem 1.7rem;display:flex;flex-direction:column;transition:transform .35s,border-color .35s,box-shadow .35s}
.plan:hover{transform:translateY(-6px);border-color:var(--line)}
.plan--feature{border-color:var(--red);box-shadow:0 30px 80px -40px var(--red-glow),0 0 0 1px rgba(226,58,74,.15) inset}
.plan__badge{position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  background:var(--red);color:#fff;border-radius:999px;padding:.2rem .8rem}
.plan__name{font-family:var(--disp);font-weight:600;font-size:1.5rem;color:var(--ink)}
.plan__tag{font-size:.85rem;color:var(--muted);margin-top:.15rem}
.plan__price{display:flex;align-items:baseline;gap:.4rem;margin-top:1.4rem}
.plan__price b{font-family:var(--disp);font-weight:600;font-size:2.6rem;line-height:1;color:var(--ink)}
.plan__price span{font-size:.82rem;color:var(--muted)}
.plan__feats{display:flex;flex-direction:column;gap:.7rem;margin-top:1.6rem;padding-top:1.4rem;border-top:1px solid var(--line)}
.plan__feats li{display:flex;align-items:flex-start;gap:.6rem;font-size:.9rem;color:var(--ink-2);line-height:1.5}
.plan__feats svg{width:16px;height:16px;color:var(--red-soft);flex:none;margin-top:.28rem}
.plan__cta{margin-top:1.8rem}
.plan__cta .btn{width:100%;padding:.8rem 1.2rem;font-size:.92rem}
.pricing-note{margin-top:1.6rem;font-size:.85rem;color:var(--muted);text-align:center}

.form-wrap{background:linear-gradient(160deg,var(--surface) 0%,var(--surface-2) 100%);
  border:1px solid var(--line-2);border-radius:24px;padding:clamp(1.6rem,4vw,2.6rem);
  box-shadow:0 40px 80px -50px rgba(0,0,0,.9)}
.form-grid{display:grid;gap:1.1rem;margin-top:1.6rem}
@media (min-width:760px){.form-grid{grid-template-columns:1fr 1fr}}
.fld{display:flex;flex-direction:column;gap:.4rem}
.fld--full{grid-column:1/-1}
.fld label{font-size:.82rem;font-weight:600;color:var(--ink-2)}
.fld label span{color:var(--red-soft);margin-left:.15rem}
.fld input,.fld select,.fld textarea{
  width:100%;background:var(--bg);border:1px solid var(--line-2);border-radius:12px;
  padding:.8rem 1rem;font:inherit;font-size:.95rem;color:var(--ink);
  transition:border-color .2s,box-shadow .2s,background .2s}
.fld textarea{min-height:120px;resize:vertical;line-height:1.6}
.fld input::placeholder,.fld textarea::placeholder{color:var(--muted-2)}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--red);
  box-shadow:0 0 0 3px rgba(226,58,74,.15);background:var(--surface)}
.fld select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238A7C71' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;padding-right:2.5rem}
.fld__hint{font-size:.75rem;color:var(--muted-2);margin-top:.15rem}
.fld__error{font-size:.78rem;color:var(--red-soft);margin-top:.25rem}

.file-drop{position:relative;border:1.5px dashed var(--line-2);border-radius:14px;padding:1.6rem 1rem;text-align:center;
  background:rgba(255,255,255,.012);transition:border-color .25s,background .25s;cursor:pointer}
.file-drop:hover,.file-drop.is-drag{border-color:var(--red);background:rgba(226,58,74,.05)}
.file-drop input{position:absolute;inset:0;opacity:0;cursor:pointer}
.file-drop__icon{width:44px;height:44px;margin:0 auto .6rem;border-radius:50%;background:var(--red);color:#fff;
  display:flex;align-items:center;justify-content:center}
.file-drop__icon svg{width:20px;height:20px}
.file-drop b{display:block;font-size:.95rem;font-weight:700;color:var(--ink)}
.file-drop span{display:block;font-size:.8rem;color:var(--muted);margin-top:.2rem}
.file-list{margin-top:.6rem;font-size:.8rem;color:var(--ink-2);display:flex;flex-direction:column;gap:.3rem}

.form-foot{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;justify-content:space-between;margin-top:1.8rem;padding-top:1.6rem;border-top:1px solid var(--line)}
.form-foot p{font-size:.78rem;color:var(--muted);max-width:22rem}
.form-foot .btn{padding:.9rem 2rem;font-size:.95rem}

.qa{border-bottom:1px solid var(--line)}
.qa summary{list-style:none;cursor:pointer;padding:1.2rem 0;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  font-size:1.02rem;font-weight:600;color:var(--ink);transition:color .25s}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--red-soft)}
.qa summary::after{content:"";width:14px;height:14px;flex:none;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg);transition:transform .3s;margin-top:-4px}
.qa[open] summary::after{transform:rotate(-135deg);margin-top:4px}
.qa p{padding:0 0 1.3rem;color:var(--muted);font-size:.94rem;line-height:1.7;max-width:44rem}

.cta{background:linear-gradient(180deg,var(--bg) 0%,#14090B 100%);border-top:1px solid var(--line);
  padding-block:clamp(4.5rem,12vw,7.5rem);position:relative;overflow:hidden;text-align:center}
.cta::before{content:"";position:absolute;top:-30%;left:50%;transform:translateX(-50%);
  width:1000px;height:1000px;pointer-events:none;background:radial-gradient(circle, rgba(226,58,74,.16) 0%, transparent 60%)}
.cta__deco{position:absolute;width:300px;height:300px;color:var(--red);opacity:.08;animation:spin 46s linear infinite;pointer-events:none}
.cta__deco--a{top:-120px;left:-120px}
.cta__deco--b{bottom:-130px;right:-110px;width:240px;height:240px;animation-direction:reverse}
.cta .container{position:relative}
.cta__kick{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;font-weight:500;color:var(--red-soft);text-transform:uppercase}
.cta__kick::before,.cta__kick::after{content:"";width:1.6rem;height:2px;background:currentColor}
.cta h2{font-family:var(--disp);font-weight:600;font-size:clamp(2.5rem,8vw,4.6rem);line-height:1.1;margin-top:.6rem;color:var(--ink);letter-spacing:-.03em}
.cta h2 em{font-style:normal;color:var(--red-soft);text-shadow:0 0 40px var(--red-glow)}
.cta__p{color:var(--ink-2);max-width:32rem;margin:.8rem auto 0}
.cta__btns{display:flex;justify-content:center;flex-wrap:wrap;gap:.8rem;margin-top:2.4rem}
.cta__mail{display:inline-block;margin-top:1.5rem;font-family:var(--mono);font-size:.8rem;letter-spacing:.05em;
  color:var(--muted);border-bottom:1.5px solid var(--line-2);transition:color .25s,border-color .25s}
.cta__mail:hover{color:var(--red-soft);border-color:var(--red)}

.ft{background:#050403;color:var(--ink);padding-top:3rem;overflow:hidden;border-top:1px solid var(--line)}
.ft__row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1.5rem}
.ft__brand p{color:var(--muted);font-size:.88rem;max-width:24rem;margin-top:.5rem}
.ft .logo{color:var(--ink)}
.socio{display:flex;gap:.6rem}
.socio a{width:44px;height:44px;border-radius:50%;border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;
  color:var(--muted);transition:all .25s}
.socio a:hover{border-color:var(--red);color:var(--red-soft);transform:translateY(-3px)}
.socio svg{width:19px;height:19px}
.ft__word{font-family:var(--disp);font-weight:600;font-size:clamp(4.5rem,18vw,12rem);line-height:.9;
  color:#151010;text-align:center;margin-top:1.6rem;user-select:none;letter-spacing:-.04em}
.ft__copy{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.6rem;border-top:1px solid var(--line);
  padding-block:1.2rem;font-size:.78rem;color:var(--muted)}
.ft__copy a{display:inline-flex;align-items:center;gap:.4rem;transition:color .25s}
.ft__copy a:hover{color:var(--red-soft)}
.ft__copy a svg{width:14px;height:14px}

.toast-wrap{position:fixed;top:80px;left:50%;transform:translateX(-50%);z-index:100;display:flex;flex-direction:column;gap:.5rem}
.toast{padding:.8rem 1.3rem;border-radius:12px;font-size:.9rem;font-weight:600;
  background:var(--surface);border:1px solid var(--line-2);box-shadow:0 20px 40px -20px rgba(0,0,0,.9)}
.toast--error{border-color:var(--red);color:var(--red-soft)}
.toast--success{border-color:#1f7a3f;color:#6ee08c}

.m-only{display:none}

@media (max-width: 819px){
  :root{ --pad: 1.15rem }
  body{ font-size:15px; line-height:1.7; padding-bottom: calc(72px + env(safe-area-inset-bottom)) }
  section[id]{ scroll-margin-top: 60px }
  .nav,.hd__cta,.railnav,.railBar,.chips{ display:none }
  .d-only{ display:none !important }
  .m-only{ display:revert }
  .hd__in{ height:60px }
  .logo{ font-size:1.3rem }
  .burger{ width:40px; height:40px }
  .hero{ padding-block:.7rem 1.6rem; overflow:visible }
  .hero__grid{ display:flex; flex-direction:column; gap:.85rem; align-items:stretch }
  .hero__copy{ display:contents }
  .hero .kicker{ order:0; font-size:.68rem; padding:.3rem .85rem; border:1px solid var(--line-2);
    border-radius:999px; background:linear-gradient(135deg, rgba(226,58,74,.10), rgba(226,58,74,.02));
    color:var(--red-soft); width:fit-content; margin-bottom:.2rem }
  .hero .kicker::before{ display:none }
  .hero h1{ order:1; font-size:clamp(1.9rem,8.5vw,2.4rem); line-height:1.15; margin:0 }
  .hero__lead{ order:2; font-size:.95rem; color:var(--ink-2); margin:0; max-width:none }
  .ba-wrap{ order:3; margin-top:.4rem }
  
  .ba__foot{ display:none }
  
  .hero__btns{ order:4; flex-direction:row; gap:.55rem; margin-top:.5rem }
  .hero__btns .btn{ flex:1; padding:.8rem 1rem; font-size:.9rem; min-height:48px }
  .hero__btns .btn-ghost{ flex:0 0 auto; width:48px; padding:0; font-size:0 }
  .mq{ padding-block:.7rem; margin-top:.9rem }
  .mq__track{ gap:1.6rem; padding-block:.5rem }
  .mq__item{ font-size:.9rem; gap:1.6rem }
  .sec{ padding-block:2.6rem }
  .head{ flex-direction:column; align-items:flex-start; gap:.7rem; margin-bottom:1.1rem }
  .head h2{ font-size:clamp(1.65rem,7.5vw,2.1rem); line-height:1.15 }
  .head__sub{ font-size:.88rem }
  .srv{ grid-template-columns:auto 1fr; padding:1.15rem .85rem; gap:.2rem .85rem; border-radius:14px; margin-bottom:.4rem }
  .srv:first-of-type{ border-top:0 }
  .srv__num{ font-size:1.3rem; min-width:2rem; padding-top:.15rem }
  .srv h3{ font-size:1rem }
  .srv p{ font-size:.86rem; margin-top:.15rem }
  .tags,.srv__go{ display:none }
  .filters{ flex-wrap:nowrap; overflow-x:auto; margin:0 0 .9rem; padding-bottom:.4rem; scrollbar-width:none }
  .filters::-webkit-scrollbar{ display:none }
  .filters button{ flex:none; padding:.5rem 1rem; font-size:.8rem }
  .rail{ gap:.85rem; padding:1rem var(--pad) .4rem; margin-inline:calc(var(--pad) * -1) }
  
  .vcard{ flex:0 0 62vw !important }
  .vcard__img{ aspect-ratio:9/15; border-radius:16px }
  .mani{ font-size:clamp(1.7rem,8vw,2.2rem); line-height:1.15 }
  .lead{ font-size:.92rem }
  .subhead{ font-size:1.3rem; margin-top:2.2rem }
  
  .steps::-webkit-scrollbar{ display:none }
  
  
  .step__n{ position:static; width:38px; height:38px; font-size:1.1rem; margin-bottom:.75rem }
  .plans{ gap:1rem; margin-top:1.4rem }
  .plan{ padding:1.6rem 1.3rem; border-radius:18px }
  .plan__name{ font-size:1.3rem }
  .plan__price b{ font-size:2.2rem }
  .form-wrap{ padding:1.4rem 1.1rem; border-radius:18px }
  .form-grid{ gap:.9rem; margin-top:1.2rem }
  .fld input,.fld select,.fld textarea{ font-size:16px; padding:.75rem .9rem }
  .form-foot{ flex-direction:column; align-items:stretch; gap:1rem }
  .form-foot p{ max-width:none; text-align:center }
  .form-foot .btn{ width:100% }
  .cta{ padding-block:3rem 3.5rem }
  .cta h2{ font-size:clamp(2rem,9vw,2.5rem) }
  .cta__btns{ flex-direction:column; gap:.55rem; margin-top:1.8rem }
  .cta__btns .btn{ width:100%; min-height:48px }
  .cta__deco{ width:180px; height:180px }
  .cta__deco--a{ top:-80px; left:-80px }
  .cta__deco--b{ bottom:-80px; right:-70px; width:160px; height:160px }
  .ft{ padding-top:2rem }
  .ft__row{ flex-direction:column; align-items:flex-start; gap:1rem }
  .ft__brand p{ max-width:none }
  .socio a{ width:40px; height:40px }
  .ft__word{ font-size:34vw; margin-top:.5rem; line-height:1 }
  .ft__copy{ flex-direction:column; align-items:flex-start; gap:.5rem; padding-block:1rem; font-size:.72rem }
  
  
  
  
  
  
}

@media (max-width: 380px){
  .hero h1{ font-size:1.75rem }
  
  .step{ flex-basis:78vw }
  .vcard{ flex-basis:68vw !important }
}

/* ─── Header CTA pulse — very subtle ───────────────────── */
@keyframes btnHeaderPulse{
  0%, 100% { box-shadow: 0 10px 30px -12px var(--red-glow); }
  50%      { box-shadow: 0 10px 30px -12px var(--red-glow),
                         0 0 0 5px rgba(226,58,74,.09); }
}
.hd__cta{ animation: btnHeaderPulse 2.6s ease-in-out infinite; }
.hd__cta:hover{ animation: none; }
@media (prefers-reduced-motion: reduce){
  .hd__cta{ animation: none; }
}

  
  
}

/* ═══════════════════════════════════════════════════════════
   Services as case studies — remove card feel
   ═══════════════════════════════════════════════════════════ */
.srv.srv--work{
  padding:0;
  border-top:none;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  margin-bottom:0;
  grid-template-columns:auto 1fr;
  gap:.4rem 1.4rem;
  align-items:start;
}
.srv.srv--work:hover{
  background:transparent;
  box-shadow:none;
}
.srv.srv--work .srv__num{
  font-size:2rem;
  padding-top:.1rem;
  min-width:2.5rem;
}
.srv.srv--work h3{
  font-family:var(--disp);
  font-weight:600;
  font-size:1.6rem;
  line-height:1.15;
  color:var(--ink);
  letter-spacing:-.01em;
}
.srv.srv--work p{
  font-size:1rem;
  color:var(--ink-2);
  max-width:44rem;
  margin-top:.4rem;
  line-height:1.7;
}
.srv.srv--work .tags{
  margin-top:1rem;
}

/* ─── Examples divider ─────────────────────────────────── */
.work-examples{
  display:flex;
  align-items:center;
  gap:1rem;
  margin-top:2rem;
  margin-bottom:1.2rem;
}
.work-examples span{
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--red-soft);
  font-weight:500;
  flex:none;
}
.work-examples i{
  flex:1 1 auto;
  height:1px;
  background:linear-gradient(90deg, var(--line-2), transparent);
}

/* ─── Work block spacing ───────────────────────────────── */
.work-block{
  margin-top:3.5rem;
}

@media (max-width:760px){
  .srv.srv--work{
    gap:.2rem 1rem;
  }
  .srv.srv--work h3{ font-size:1.3rem }
  .srv.srv--work p{ font-size:.92rem }
  .srv.srv--work .srv__num{ font-size:1.5rem; min-width:2rem }
  .work-block{ margin-top:2.5rem }
}

/* ═══════════════════════════════════════════════════════════
   HERO — Newsreader soft serif (whole title in one font)
   ═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   HERO — Lora (soft low-contrast serif, warm)
   ═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   HERO — clean red text, no box
   ═══════════════════════════════════════════════════════════ */
.hero h1 mark{ background:none; color:var(--red-soft); padding:0; }

/* ─── Simple How it works ──────────────────────────────── */
.steps--simple{
  margin-top:0;
}
.steps--simple .step h3{
  font-size:1.15rem;
  font-weight:600;
  color:var(--ink);
}
.steps--simple .step p{
  color:var(--muted);
  font-size:.92rem;
  margin-top:.2rem;
}
.steps--simple .step__n{
  width:44px;
  height:44px;
  font-size:1.15rem;
}
@media (min-width:880px){
  .steps--simple{
    grid-template-columns:repeat(4,1fr);
    gap:1.4rem;
  }
  .steps--simple::before{
    top:22px;
  }
}

/* ─── FAQ centering ─────────────────────────────────────── */
.faq{
  max-width:52rem;
  margin-inline:auto;
}

/* ═══════════════════════════════════════════════════════════
   Mobile bottom CTA bar — refined
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 819px){

  /* افزایش padding-bottom body برای جلوگیری از overlap */
  body{
    padding-bottom:calc(80px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .m-cta-bar{
    display:flex;
    position:fixed;
    bottom:0; left:0; right:0;
    z-index:70;
    padding:.6rem var(--pad) max(.6rem, env(safe-area-inset-bottom, 0px));
    background:rgba(11,9,8,.92);
    backdrop-filter:blur(18px) saturate(1.3);
    -webkit-backdrop-filter:blur(18px) saturate(1.3);
    border-top:1px solid var(--line);
    gap:.7rem;
    align-items:center;
    transform:translateY(120%);
    opacity:0;
    pointer-events:none;
    transition:transform .4s cubic-bezier(.22,1,.36,1), opacity .3s ease;
  }
  .m-cta-bar.is-visible{
    transform:translateY(0);
    opacity:1;
    pointer-events:auto;
  }

  .m-cta-bar__info{
    flex:1;
    min-width:0;
    display:flex;
    flex-direction:column;
    line-height:1.3;
    gap:.1rem;
  }
  .m-cta-bar__info b{
    font-size:.86rem;
    color:var(--ink);
    font-weight:600;
    letter-spacing:-.005em;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .m-cta-bar__info span{
    font-size:.72rem;
    color:var(--muted);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .m-cta-bar .btn{
    flex:none;
    display:inline-flex;
    align-items:center;
    gap:.4rem;
    padding:.68rem 1.1rem;
    font-size:.85rem;
    font-weight:600;
    min-height:42px;
    white-space:nowrap;
  }
}

/* ═══════════════════════════════════════════════════════════
   How it works — mobile stacked (single column)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 879px){

  /* override کامل استایل flex قبلی */
  .steps,
  .steps--simple{
    display:flex !important;
    flex-direction:column !important;
    gap:1rem !important;
    padding:0 !important;
    margin-top:1.5rem !important;
    overflow:visible !important;
    scroll-snap-type:none !important;
  }

  .steps::before,
  .steps--simple::before{
    display:none !important;
  }

  .steps .step,
  .steps--simple .step{
    display:grid !important;
    grid-template-columns:auto 1fr !important;
    gap:.2rem 1rem !important;
    align-items:start !important;
    flex:0 0 auto !important;
    flex-basis:auto !important;
    scroll-snap-align:auto !important;
    position:relative !important;
    padding:1rem 1.15rem 1.15rem !important;
    background:var(--surface) !important;
    border:1px solid var(--line-2) !important;
    border-radius:14px !important;
  }

  .steps .step__n,
  .steps--simple .step__n{
    position:static !important;
    width:38px !important;
    height:38px !important;
    font-size:1rem !important;
    font-family:var(--disp) !important;
    grid-row:1 / 3 !important;
    align-self:start !important;
    margin:0 !important;
    box-shadow:0 0 0 4px rgba(226,58,74,.08) !important;
  }

  .steps .step h3,
  .steps--simple .step h3{
    font-size:1.05rem !important;
    line-height:1.25 !important;
    margin:0 !important;
    grid-column:2 !important;
    align-self:center !important;
    padding-top:.15rem !important;
  }

  .steps .step p,
  .steps--simple .step p{
    font-size:.88rem !important;
    color:var(--muted) !important;
    line-height:1.5 !important;
    margin:.15rem 0 0 0 !important;
    grid-column:2 !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   Services & Work — mobile polish
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 819px){

  /* ─── Service header: number + title stack ─── */
  .container > div[style*="grid-template-columns:auto 1fr"]{
    display:flex !important;
    flex-direction:column !important;
    gap:.7rem !important;
  }

  /* عدد سرویس — کوچیک‌تر و کنار عنوان */
  .container > div[style*="grid-template-columns:auto 1fr"] > span:first-child{
    font-size:1rem !important;
    font-family:var(--mono) !important;
    letter-spacing:.14em !important;
    color:var(--red-soft) !important;
    font-weight:500 !important;
    min-width:0 !important;
    padding-top:0 !important;
    line-height:1 !important;
  }

  /* تیتر سرویس — کوچیک‌تر */
  .container > div[style*="grid-template-columns:auto 1fr"] h3{
    font-size:1.35rem !important;
    line-height:1.15 !important;
  }

  /* توضیح سرویس */
  .container > div[style*="grid-template-columns:auto 1fr"] p{
    font-size:.92rem !important;
    line-height:1.6 !important;
    margin-top:.45rem !important;
  }

  /* تگ‌ها */
  .container > div[style*="grid-template-columns:auto 1fr"] .tags{
    margin-top:.7rem !important;
    gap:.4rem !important;
  }
  .container > div[style*="grid-template-columns:auto 1fr"] .tags span{
    font-size:.72rem !important;
    padding:.18rem .7rem !important;
  }

  /* ─── Work block spacing ─── */
  .work-block{
    margin-top:2.5rem !important;
  }

  /* ─── Rail: cards smaller with peek of next ─── */
  .rail{
    gap:.85rem !important;
    padding:1rem var(--pad) .5rem !important;
  }

  .rail .gcard{
    flex:0 0 62vw !important;
    max-width:62vw !important;
  }
  .rail .gcard .mini{
    border-radius:14px !important;
  }

  /* ─── Scroll indicator below rail ─── */
  .rail::after{
    content:"";
    flex:0 0 calc(var(--pad) - .85rem);
  }

  /* ─── Scroll hint line ─── */
  .container:has(.rail)::after{
    content:"Swipe to see more →";
    display:block;
    margin-top:.9rem;
    padding-inline:var(--pad);
    font-family:var(--mono);
    font-size:.68rem;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--muted-2);
    opacity:.7;
  }
}

@media (max-width: 380px){
  .rail .gcard{
    flex:0 0 68vw !important;
    max-width:68vw !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   Hero — mobile polish
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 819px){

  /* ─── Hero section — less top padding ─── */
  .hero{
    padding-block:.5rem 1.2rem !important;
  }

  /* ─── Hero grid — tighter gaps ─── */
  .hero__grid{
    gap:.7rem !important;
  }

  /* ─── BA frame — shorter aspect ratio ─── */
  .ba__frame{
    aspect-ratio:1/1.05 !important;
    border-radius:180px 180px 20px 20px !important;
  }

  /* ─── BA tags — smaller and repositioned ─── */
  
  
  

  /* ─── BA meta badge — reposition to bottom ─── */
  
  

  /* ─── BA handle — smaller ─── */
  .ba__handle{
    width:40px !important;
    height:40px !important;
  }
  .ba__handle svg{
    width:18px !important;
    height:18px !important;
  }

  /* ─── Halo — smaller on mobile ─── */
  .halo{
    filter:blur(20px) !important;
  }

  /* ─── Hero heading — smaller line-height ─── */
  .hero h1{
    font-size:clamp(1.85rem, 8vw, 2.4rem) !important;
    line-height:1.12 !important;
    margin-top:.6rem !important;
  }

  /* ─── Hero lead — smaller ─── */
  .hero__lead{
    font-size:.92rem !important;
    line-height:1.55 !important;
  }

  /* ─── Hero buttons — full width ─── */
  .hero__btns{
    gap:.5rem !important;
    margin-top:1.1rem !important;
  }
  .hero__btns .btn{
    flex:1 !important;
    padding:.8rem 1rem !important;
    font-size:.88rem !important;
    min-height:46px !important;
  }

  /* ─── Chips — horizontal scroll instead of wrap ─── */
  .chips{
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
    scrollbar-width:none !important;
    margin-inline:calc(var(--pad) * -1) !important;
    padding-inline:var(--pad) !important;
    padding-bottom:.4rem !important;
    -webkit-overflow-scrolling:touch;
  }
  .chips::-webkit-scrollbar{
    display:none !important;
  }
  .chips .chip{
    flex:none !important;
    font-size:.78rem !important;
    padding:.4rem .85rem !important;
    white-space:nowrap !important;
  }
  .chips .chip svg{
    width:13px !important;
    height:13px !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   Portfolio slider — handle-only drag refinement
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 819px){

  /* خط هم pointer-events فعال */
  .mini__line{
    pointer-events:auto;
    touch-action:none;
    cursor:ew-resize;
  }

  /* handle بزرگ‌تر برای لمس راحت */
  .mini__handle{
    width:46px !important;
    height:46px !important;
    box-shadow:0 6px 20px -4px var(--red-glow),
               0 0 0 6px rgba(226,58,74,.12);
  }
  .mini__handle svg{
    width:22px !important;
    height:22px !important;
  }

  /* انیمیشن pulse ظریف روی handle تا کاربر بفهمه interactive هست */
  .mini:not(.touched) .mini__handle{
    animation:breathe2 2.4s ease-in-out infinite;
  }
}

/* ═══════════════════════════════════════════════════════════
   Portfolio slider — handle-only drag (all viewports)
   ═══════════════════════════════════════════════════════════ */
.mini:not(.touched) .mini__handle{
  animation:breathe2 2.4s ease-in-out infinite;
}
.mini:not(.touched) .mini__handle:hover{
  transform:translate(-50%,-50%) scale(1.1);
}
.ba:not(.touched) .ba__handle:hover{
  transform:translate(-50%,-50%) scale(1.08);
}

/* راهنمای کوچیک زیر کارت‌ها در دسکتاپ */
.rail-hint{
  display:block;
  margin-top:.6rem;
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted-2);
  opacity:.55;
}

/* ═══════════════════════════════════════════════════════════
   Overflow safety — no horizontal scroll anywhere
   ═══════════════════════════════════════════════════════════ */
html{
  overflow-x:hidden !important;
  max-width:100%;
}
body{
  overflow-x:hidden !important;
  max-width:100vw;
  position:relative;
}

/* رفع overflow از hero halo که بیرون می‌زنه */
.halo,
.halo--2{
  max-width:100%;
}

/* رفع overflow از container منفی-مارجین rails */
.rail,
.chips,
.steps{
  max-width:100vw;
}

/* روی موبایل — اطمینان از نبود overflow از halo ها و decor ها */
@media (max-width: 819px){
  .hero{
    overflow:hidden;
  }
  .cta,
  .zone-dark,
  .zone-paper2{
    overflow-x:hidden;
  }
  /* footer decor */
  .ft,
  .ft__word{
    max-width:100vw;
    overflow:hidden;
  }
}

/* ═══════════════════════════════════════════════════════════
   Rail — smoother horizontal scroll
   ═══════════════════════════════════════════════════════════ */

/* روی همه سایزها: proximity به جای mandatory */
.rail{
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
  scroll-behavior:smooth;
  overscroll-behavior-x:contain;
}

/* روی موبایل: هیچ snap نباشه — اسکرول کاملاً آزاد */
@media (max-width: 819px){
  .rail{
    scroll-snap-type:none !important;
    scroll-padding-left:0;
    padding-inline:var(--pad);
    margin-inline:calc(var(--pad) * -1);
    gap:.75rem;
  }

  /* غیرفعال کردن snap-align روی کارت‌ها */
  .rail > *{
    scroll-snap-align:none !important;
  }

  /* کارت‌ها عرض مناسب با نمایش بخشی از کارت بعدی */
  .rail .gcard{
    flex:0 0 68vw;
    max-width:68vw;
  }
}

/* ═══════════════════════════════════════════════════════════
   Hero slider — force handle clickable (override everything)
   ═══════════════════════════════════════════════════════════ */
.ba__handle,
.ba__line{
  pointer-events:auto !important;
  touch-action:none !important;
  cursor:ew-resize !important;
  -webkit-user-select:none;
  user-select:none;
}

/* اطمینان: خط و handle روی بقیه‌ی لایه‌ها باشن */
.ba__line{
  z-index:3 !important;
}
.ba__handle{
  z-index:4 !important;
}

/* هندل نرم روی hover */
.ba__handle:hover{
  transform:translate(-50%,-50%) scale(1.08);
}

/* ═══════════════════════════════════════════════════════════
   Hero slider — only the circle handle is draggable
   ═══════════════════════════════════════════════════════════ */
.ba__handle{
  pointer-events:auto !important;
  touch-action:none !important;
  cursor:ew-resize !important;
  -webkit-user-select:none;
  user-select:none;
  z-index:4;
}
.ba__handle:hover{
  transform:translate(-50%,-50%) scale(1.08);
}
.ba__line{
  pointer-events:none !important;
  z-index:3;
}

/* ═══════════════════════════════════════════════════════════
   Portfolio — only the handle circle is interactive
   ═══════════════════════════════════════════════════════════ */
.mini__line{
  pointer-events:none !important;
  cursor:default !important;
  touch-action:auto !important;
}
.mini__handle{
  pointer-events:auto !important;
  cursor:ew-resize !important;
  touch-action:none !important;
}

/* ═══════════════════════════════════════════════════════════
   Hero BA tags — always at bottom (mobile + desktop)
   ═══════════════════════════════════════════════════════════ */
.ba__tag{
  bottom:16px !important;
  top:auto !important;
}
.ba__tag--b{
  left:14px !important;
  right:auto !important;
}
.ba__tag--a{
  right:14px !important;
  left:auto !important;
}

/* meta (AI EDIT) — برگشت به بالا */

@media (max-width: 819px){
  .ba__tag{
    font-size:.68rem !important;
    padding:.22rem .75rem !important;
    bottom:12px !important;
  }
  .ba__tag--b{
    left:12px !important;
  }
  .ba__tag--a{
    right:12px !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   Rail — desktop horizontal scroll v2
   ═══════════════════════════════════════════════════════════ */

/* روی همه سایزها: حذف snap مطلق */
.rail{
  scroll-snap-type:none !important;
  scroll-behavior:smooth;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:var(--red) var(--surface-2);
}
.rail > *{
  scroll-snap-align:none !important;
}

/* روی دسکتاپ: اسکرول‌بار ضخیم‌تر + drag */
@media (min-width: 820px){
  .rail{
    cursor:grab;
  }
  .rail.is-dragging,
  .rail.is-dragging *{
    cursor:grabbing !important;
    user-select:none !important;
  }

  /* اسکرول‌بار 1.5 برابر ضخیم‌تر (6px → 9px) */
  .rail::-webkit-scrollbar{
    height:9px;
  }
  .rail::-webkit-scrollbar-track{
    background:var(--surface-2);
    border-radius:9px;
    margin-inline:var(--pad);
    border:1px solid var(--line);
  }
  .rail::-webkit-scrollbar-thumb{
    background:var(--red);
    border-radius:9px;
    transition:background .2s;
    border:1px solid var(--red-deep);
  }
  .rail::-webkit-scrollbar-thumb:hover{
    background:var(--red-soft);
  }

  .rail .gcard{
    flex:0 0 320px;
    max-width:320px;
  }

  /* hide railBar قدیمی */
  .railBar{
    display:none;
  }
}

/* روی موبایل: scrollbar مخفی */
@media (max-width: 819px){
  .rail::-webkit-scrollbar{
    display:none;
  }
  .rail{
    scrollbar-width:none;
  }
}

/* ═══════════════════════════════════════════════════════════
   Rail drag — disable smooth during drag (fallback)
   ═══════════════════════════════════════════════════════════ */
.rail.is-dragging{
  scroll-behavior:auto !important;
  scroll-snap-type:none !important;
}

/* روی دسکتاپ */
@media (min-width: 820px){
  .rail.is-dragging .gcard,
  .rail.is-dragging .mini{
    pointer-events:none;
  }
  .rail.is-dragging .mini__handle,
  .rail.is-dragging .ba__handle{
    pointer-events:auto;
  }
}

/* ═══════════════════════════════════════════════════════════
   Rail — kill vertical scrollbar (only horizontal)
   ═══════════════════════════════════════════════════════════ */
.rail{
  overflow-y:hidden !important;
  overflow-x:auto !important;
  height:auto !important;
  max-height:none !important;
  align-items:flex-start;
}
.rail > *{
  flex-shrink:0 !important;
}

/* روی WebKit — اسکرول‌بار فقط افقی */
.rail::-webkit-scrollbar:vertical{
  display:none !important;
  width:0 !important;
}

/* Firefox */
.rail{
  scrollbar-width:thin;
}

/* رفع overflow از کارت‌ها که باعث scroll عمودی می‌شه */
.rail .gcard,
.rail .vcard{
  align-self:flex-start;
  overflow:visible;
}

/* ═══════════════════════════════════════════════════════════
   Form field error state
   ═══════════════════════════════════════════════════════════ */
.fld--has-error input,
.fld--has-error textarea,
.fld--has-error select{
  border-color:var(--red) !important;
  background:rgba(226,58,74,.04) !important;
  box-shadow:0 0 0 3px rgba(226,58,74,.12) !important;
}
.fld--has-error label{
  color:var(--red-soft);
}
.fld__error{
  display:inline-flex;
  align-items:flex-start;
  gap:.4rem;
  font-size:.82rem;
  color:var(--red-soft);
  margin-top:.45rem;
  line-height:1.5;
  animation:errorShake .35s ease;
}

@keyframes errorShake{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-4px)}
  75%{transform:translateX(4px)}
}

/* Toast خطا در بالای صفحه */
.toast--error{
  border-color:var(--red) !important;
  background:rgba(226,58,74,.08) !important;
  color:var(--ink) !important;
  font-weight:600;
}
.toast--error::before{
  content:"⚠";
  margin-inline-end:.5rem;
  font-size:1.1em;
}