@font-face{font-family:Vazirmatn;src:url(fonts/Vazirmatn-Regular.woff2)format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Vazirmatn;src:url(fonts/Vazirmatn-SemiBold.woff2)format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Vazirmatn;src:url(fonts/Vazirmatn-Bold.woff2)format('woff2');font-weight:700;font-display:swap}

/* ─── رنگ‌ها: دقیقاً از mammutworld.com ─────────────────────
   سرمه‌ای #001c54 · سرمه‌ای تیره #010a1d · قرمز #cf1111
   طوسی روشن #eef1f3 · متن #20292c / #626262 · گردیِ دکمه ۱۰px */
:root{
  --px: calc(100vw / 1080);
  --navy:#001c54; --navy-deep:#010a1d; --navy-soft:#0a2a6b;
  --red:#cf1111; --red-lo:#a50d0d;
  --bg:#eef1f3; --card:#ffffff; --stage:#e3e8ed;
  --line:#d6dde4; --line2:#c2ccd6;
  --txt:#20292c; --txt2:#626262; --txt3:#8b9198;
  --r:calc(10*var(--px));
  --ease:cubic-bezier(.22,.61,.36,1);
  color-scheme:light;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;background:var(--bg)}
body{font-family:Vazirmatn,system-ui,sans-serif;color:var(--txt);
  font-size:calc(28*var(--px));line-height:1.7;
  -webkit-user-select:none;user-select:none;
  overscroll-behavior:none;touch-action:manipulation;cursor:none}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2.1}
:focus-visible{outline:calc(4*var(--px)) solid var(--red);outline-offset:calc(3*var(--px))}
#app{height:100%;display:flex;flex-direction:column;overflow:hidden}

/* ─── هدر: نوار سرمه‌ای تیره مثل سایت · QR همیشه پیدا ──── */
#hdr{flex:0 0 auto;height:calc(190*var(--px));
  display:flex;align-items:center;justify-content:space-between;
  padding:0 calc(38*var(--px));background:var(--navy-deep);position:relative;z-index:20}
#hdr::after{content:"";position:absolute;inset:auto 0 0 0;height:calc(5*var(--px));background:var(--red)}
.brand{display:flex;align-items:center;gap:calc(26*var(--px));min-width:0}
.brand-logo{height:calc(92*var(--px));width:auto;flex:0 0 auto}
.brand-txt{display:flex;flex-direction:column;min-width:0}
.brand-txt b{font-size:calc(40*var(--px));font-weight:700;line-height:1.25;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qr{display:flex;align-items:center;gap:calc(18*var(--px));flex:0 0 auto;
  padding:calc(12*var(--px));border-radius:calc(16*var(--px));
  transition:background .18s var(--ease),transform .18s var(--ease)}
.qr.press{background:rgba(255,255,255,.14);transform:scale(.96)}
.qr-frame{width:calc(128*var(--px));height:calc(128*var(--px));flex:0 0 auto;
  background:#fff;border-radius:calc(12*var(--px));padding:calc(7*var(--px));
  box-shadow:0 0 0 calc(3*var(--px)) var(--red)}
.qr-frame img{width:100%;height:100%;image-rendering:pixelated}
.qr-cap{display:flex;flex-direction:column;text-align:start}
.qr-cap b{font-size:calc(27*var(--px));font-weight:700;color:#fff}
.qr-cap i{font-size:calc(21*var(--px));font-style:normal;color:#9fb3d8;direction:ltr;text-align:start}

.screen{flex:1 1 auto;display:none;flex-direction:column;min-height:0;overflow:hidden}
.screen.is-on{display:flex}

/* ─── خانه ────────────────────────────────────────────── */
.hero{flex:0 0 auto;padding:calc(40*var(--px)) calc(44*var(--px)) calc(26*var(--px));
  background:var(--card);border-bottom:calc(2*var(--px)) solid var(--line)}
.eyebrow{display:inline-block;font-size:calc(23*var(--px));font-weight:600;color:var(--red);
  letter-spacing:.02em;margin-bottom:calc(8*var(--px))}
.hero h1{font-size:calc(64*var(--px));font-weight:700;line-height:1.24;color:var(--navy)}
.hero p{font-size:calc(27*var(--px));color:var(--txt2);margin-top:calc(4*var(--px))}
.tabs{flex:0 0 auto;display:flex;gap:calc(16*var(--px));
  padding:calc(26*var(--px)) calc(44*var(--px));background:var(--card);
  border-bottom:calc(2*var(--px)) solid var(--line)}
.tabs button{flex:1;min-height:calc(114*var(--px));border-radius:var(--r);
  background:var(--card);border:calc(2*var(--px)) solid var(--navy);color:var(--navy);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(2*var(--px));
  transition:background .18s var(--ease),color .18s var(--ease),transform .14s var(--ease)}
.tabs button b{font-size:calc(30*var(--px));font-weight:700}
.tabs button i{font-size:calc(22*var(--px));font-style:normal;opacity:.72}
.tabs button.press{transform:scale(.96)}
.tabs button.on{background:var(--navy);color:#fff}
.grid{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  display:grid;grid-template-columns:1fr 1fr;gap:calc(26*var(--px));
  padding:calc(30*var(--px)) calc(44*var(--px)) calc(40*var(--px));
  align-content:start;grid-auto-rows:max-content}
.grid::-webkit-scrollbar{width:calc(10*var(--px))}
.grid::-webkit-scrollbar-thumb{background:var(--line2);border-radius:calc(6*var(--px))}
.gsec{grid-column:1/-1;display:flex;align-items:center;gap:calc(18*var(--px));
  padding:calc(16*var(--px)) 0 calc(2*var(--px))}
.gsec b{font-size:calc(30*var(--px));font-weight:700;white-space:nowrap;color:var(--navy)}
.gsec::after{content:"";flex:1;height:calc(2*var(--px));background:var(--line)}
.card{background:var(--card);border:calc(2*var(--px)) solid var(--line);
  border-radius:var(--r);overflow:hidden;text-align:start;display:flex;flex-direction:column;
  transition:transform .16s var(--ease),border-color .16s var(--ease),box-shadow .16s var(--ease)}
.card.press{transform:scale(.955);border-color:var(--navy);
  box-shadow:0 calc(6*var(--px)) calc(20*var(--px)) rgba(0,28,84,.22)}
.card .cv{position:relative;flex:0 0 auto;background:var(--stage);overflow:hidden}
.card .cv img{width:100%;height:auto;aspect-ratio:1.414;object-fit:cover}
.card .bd{flex:1 1 auto;padding:calc(18*var(--px)) calc(22*var(--px)) calc(20*var(--px));
  display:flex;flex-direction:column;gap:calc(6*var(--px))}
.card .bd b{font-size:calc(29*var(--px));font-weight:700;line-height:1.45;color:var(--navy)}
.card .bd span{font-size:calc(22*var(--px));color:var(--txt2);display:flex;align-items:center;gap:calc(8*var(--px))}
.card .bd span::before{content:"";width:calc(9*var(--px));height:calc(9*var(--px));border-radius:50%;background:var(--red)}
.card.feat{grid-column:1/-1}
.card.feat .cv img{aspect-ratio:2.35}
.card.feat .bd b{font-size:calc(36*var(--px))}
.badge{position:absolute;inset-block-start:calc(16*var(--px));inset-inline-start:calc(16*var(--px));
  background:var(--red);color:#fff;font-size:calc(21*var(--px));font-weight:600;
  padding:calc(6*var(--px)) calc(16*var(--px));border-radius:calc(99*var(--px))}
.pad{flex:0 0 auto;height:calc(10*var(--px))}

/* ─── نمایشگر ─────────────────────────────────────────── */
.vbar{flex:0 0 auto;height:calc(104*var(--px));display:flex;align-items:center;
  gap:calc(20*var(--px));padding:0 calc(30*var(--px));
  background:var(--card);border-bottom:calc(2*var(--px)) solid var(--line)}
.back{display:flex;align-items:center;gap:calc(12*var(--px));flex:0 0 auto;
  height:calc(78*var(--px));padding:0 calc(24*var(--px));border-radius:var(--r);
  background:var(--card);border:calc(2*var(--px)) solid var(--navy);color:var(--navy);
  font-size:calc(26*var(--px));font-weight:700;transition:all .16s var(--ease)}
.back.press{background:var(--navy);color:#fff;transform:scale(.95)}
.back svg{width:calc(30*var(--px));height:calc(30*var(--px));flex:0 0 auto}
.vmeta{flex:1;display:flex;align-items:baseline;gap:calc(16*var(--px));min-width:0;justify-content:flex-end}
.vmeta b{font-size:calc(30*var(--px));font-weight:700;color:var(--navy);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vmeta span{font-size:calc(24*var(--px));color:var(--red);font-weight:700;flex:0 0 auto}
.stage{flex:1 1 auto;min-height:0;position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;background:var(--stage);touch-action:none}
.sheet{width:100%;transform-origin:0 0;will-change:transform;
  box-shadow:0 calc(10*var(--px)) calc(36*var(--px)) rgba(1,10,29,.28)}
.sheet img{width:100%;height:auto;background:#fff}
.sheet.anim{transition:transform .3s var(--ease)}
.sheet.flip{animation:flip .34s var(--ease)}
@keyframes flip{from{opacity:.25;transform:translateX(var(--dir,0)) scale(.985)}to{opacity:1;transform:none}}
.spin[hidden],.zoomOut[hidden],.modal[hidden]{display:none!important}
.spin{position:absolute;width:calc(70*var(--px));height:calc(70*var(--px));
  border:calc(6*var(--px)) solid var(--line2);border-top-color:var(--navy);
  border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.zoomOut{position:absolute;inset-block-end:calc(24*var(--px));inset-inline-end:calc(24*var(--px));
  display:flex;align-items:center;gap:calc(12*var(--px));z-index:5;
  height:calc(92*var(--px));padding:0 calc(30*var(--px));border-radius:calc(99*var(--px));
  background:var(--navy);color:#fff;font-size:calc(27*var(--px));font-weight:700;
  box-shadow:0 calc(6*var(--px)) calc(22*var(--px)) rgba(1,10,29,.4)}
.zoomOut svg{width:calc(28*var(--px));height:calc(28*var(--px));flex:0 0 auto}
.zoomOut.press{background:var(--navy-soft);transform:scale(.95)}
.ctrls{flex:0 0 auto;height:calc(206*var(--px));display:flex;align-items:center;
  gap:calc(18*var(--px));padding:0 calc(30*var(--px));
  background:var(--card);border-top:calc(2*var(--px)) solid var(--line)}
.nav{flex:1;height:calc(150*var(--px));border-radius:var(--r);
  display:flex;align-items:center;justify-content:center;gap:calc(16*var(--px));
  background:var(--card);border:calc(2*var(--px)) solid var(--navy);color:var(--navy);
  font-size:calc(32*var(--px));font-weight:700;
  transition:transform .14s var(--ease),background .16s var(--ease),opacity .16s}
.nav svg{width:calc(42*var(--px));height:calc(42*var(--px));flex:0 0 auto;stroke-width:2.4}
.nav.primary{background:var(--navy);color:#fff}
.nav.press{transform:scale(.955);background:var(--navy);color:#fff}
.nav.primary.press{background:var(--navy-soft)}
.nav[disabled]{opacity:.28}
.zoom{flex:0 0 calc(190*var(--px));height:calc(150*var(--px));border-radius:var(--r);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(4*var(--px));
  background:var(--card);border:calc(2*var(--px)) solid var(--line2);color:var(--navy);
  font-size:calc(23*var(--px));font-weight:700}
.zoom svg{width:calc(44*var(--px));height:calc(44*var(--px))}
.zoom.press{transform:scale(.955);background:var(--bg)}
.rail{flex:0 0 auto;height:calc(186*var(--px));display:flex;align-items:center;gap:calc(14*var(--px));
  padding:0 calc(30*var(--px));overflow-x:auto;overflow-y:hidden;
  background:var(--bg);border-top:calc(2*var(--px)) solid var(--line);
  scrollbar-width:none;overscroll-behavior:contain}
.rail::-webkit-scrollbar{display:none}
.rail.hide{display:none}
.rail button{flex:0 0 auto;position:relative;height:calc(132*var(--px));aspect-ratio:1.414;
  border-radius:calc(8*var(--px));overflow:hidden;background:#fff;
  border:calc(3*var(--px)) solid var(--line2);opacity:.62;transition:all .18s var(--ease)}
.rail button img{width:100%;height:100%;object-fit:cover}
.rail button.on{opacity:1;border-color:var(--red);transform:scale(1.05)}
.rail button i{position:absolute;inset-block-end:0;inset-inline-start:0;
  background:rgba(1,10,29,.78);color:#fff;font-style:normal;font-size:calc(21*var(--px));
  padding:calc(1*var(--px)) calc(9*var(--px));border-start-end-radius:calc(8*var(--px))}
.hint{flex:0 0 auto;height:calc(60*var(--px));display:flex;align-items:center;justify-content:center;
  font-size:calc(21*var(--px));color:var(--txt2);background:var(--bg)}
.modal{position:fixed;inset:0;z-index:60;background:rgba(1,10,29,.86);
  display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(calc(12*var(--px)));animation:fade .22s var(--ease)}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal-card{width:calc(760*var(--px));background:var(--card);
  border-radius:calc(20*var(--px));padding:calc(48*var(--px));text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:calc(12*var(--px))}
.modal-card img{width:calc(470*var(--px));height:calc(470*var(--px));background:#fff;
  padding:calc(20*var(--px));border-radius:calc(14*var(--px));
  border:calc(3*var(--px)) solid var(--line);image-rendering:pixelated}
.modal-card b{font-size:calc(38*var(--px));font-weight:700;margin-top:calc(8*var(--px));color:var(--navy)}
.modal-card p{font-size:calc(26*var(--px));color:var(--txt2);line-height:1.65}
.modal-card .url{font-size:calc(22*var(--px));color:var(--red);direction:ltr;word-break:break-all}
#qrClose{margin-top:calc(16*var(--px));width:100%;height:calc(112*var(--px));
  border-radius:var(--r);background:var(--navy);color:#fff;font-size:calc(32*var(--px));font-weight:700}
#qrClose.press{background:var(--navy-soft);transform:scale(.97)}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ─── وضعیت ذخیرهٔ آفلاین ─────────────────────────────── */
.chip[hidden]{display:none!important}
.chip{position:fixed;inset-block-end:calc(22*var(--px));inset-inline-end:calc(22*var(--px));
  z-index:70;display:flex;flex-direction:column;gap:calc(8*var(--px));
  min-width:calc(430*var(--px));padding:calc(16*var(--px)) calc(22*var(--px));
  border-radius:calc(14*var(--px));font-size:calc(23*var(--px));font-weight:700;color:#fff;
  background:var(--navy);box-shadow:0 calc(6*var(--px)) calc(24*var(--px)) rgba(1,10,29,.38)}
.chip.ok{background:#0d7a2e}
.chip.warn{background:var(--red)}
.chip-track{height:calc(7*var(--px));border-radius:calc(99*var(--px));background:rgba(255,255,255,.28);overflow:hidden}
.chip-track i{display:block;height:100%;width:0;background:#fff;border-radius:inherit;transition:width .25s var(--ease)}

/* ─── دکمهٔ تمام‌صفحه ─────────────────────────────────── */
.fsbtn[hidden]{display:none!important}
/* وسطِ پایین: نه با لوگو تداخل دارد نه با دکمهٔ بزرگ‌نمایی */
.fsbtn{position:fixed;inset-block-end:calc(20*var(--px));inset-inline:0;margin:0 auto;width:fit-content;
  z-index:75;display:flex;align-items:center;gap:calc(10*var(--px));
  height:calc(76*var(--px));padding:0 calc(26*var(--px));border-radius:calc(99*var(--px));
  background:var(--navy);border:calc(2*var(--px)) solid rgba(255,255,255,.35);color:#fff;
  font-size:calc(24*var(--px));font-weight:700;
  box-shadow:0 calc(6*var(--px)) calc(22*var(--px)) rgba(1,10,29,.4)}
.fsbtn svg{width:calc(26*var(--px));height:calc(26*var(--px));flex:0 0 auto}
.fsbtn.press{background:var(--red);border-color:var(--red);transform:scale(.95)}
#admReset{width:100%;height:calc(104*var(--px));border-radius:var(--r);
  background:var(--red);color:#fff;font-size:calc(28*var(--px));font-weight:700}
#admReset.press{background:var(--red-lo);transform:scale(.97)}
#admClose{width:100%;height:calc(92*var(--px));border-radius:var(--r);margin-top:calc(4*var(--px));
  background:var(--card);border:calc(2*var(--px)) solid var(--line2);color:var(--navy);
  font-size:calc(26*var(--px));font-weight:700}
#admClose.press{background:var(--bg)}
#adm .modal-card p{font-size:calc(24*var(--px))}