/* ==========================================================================
   MASH TRADE DESIGN SYSTEM (v2.0)
   Custom Tailored for SIX-H TEXTILE PLATFORM
   Architect & Developer: MASH TRADE Engineering & Design Labs
   Prefix & Namespace: --mash-* (Tokens) | .mash-* (Components & Utilities)
   ========================================================================== */

:root{
  /* MASH TRADE Core Palette */
  --mash-green-950:#071b15;
  --mash-green-900:#0d2c22;
  --mash-green-800:#123e2f;
  --mash-green-700:#1a5a44;
  --mash-green-600:#227054;

  --mash-lime:#a4cc3c;
  --mash-lime-600:#8fbb2b;
  --mash-lime-200:#e2f0b8;

  --mash-paper:#ffffff;
  --mash-cream:#f7f6f1;
  --mash-sand:#efeee7;

  --mash-ink:#0f1613;
  --mash-ink-2:#26332c;
  --mash-muted:#5d6b63;
  --mash-muted-dark:#a9bdb2;

  --mash-line:rgba(13,44,34,.12);
  --mash-line-dark:rgba(255,255,255,.14);

  /* MASH Typography */
  --mash-font-display:'Sora',ui-sans-serif,system-ui,'Segoe UI',sans-serif;
  --mash-font-body:'Inter',ui-sans-serif,system-ui,'Segoe UI',sans-serif;

  /* MASH Metrics & Spacing */
  --mash-wrap:1200px;
  --mash-wrap-wide:1400px;
  --mash-wrap-narrow:820px;
  --mash-gutter:clamp(1.15rem,4vw,2.5rem);
  --mash-radius:22px;
  --mash-radius-sm:14px;
  --mash-section-y:clamp(1.5rem,3.8vh + .3vw,5.25rem);

  /* MASH Elevation & Shadows */
  --mash-shadow-sm:0 2px 8px rgba(13,44,34,.06);
  --mash-shadow:0 18px 46px -22px rgba(13,44,34,.38);
  --mash-shadow-lg:0 44px 90px -40px rgba(13,44,34,.5);

  /* MASH Motion Tokens */
  --mash-dur-micro:150ms;
  --mash-dur-fast:240ms;
  --mash-dur-base:380ms;
  --mash-dur-reveal:600ms;
  --mash-dur-hero:900ms;

  --mash-ease:cubic-bezier(.22,.68,.32,1);
  --mash-ease-out:cubic-bezier(.16,1,.3,1);
  --mash-ease-in-out:cubic-bezier(.65,0,.35,1);
  --mash-ease-in:cubic-bezier(.4,0,1,1);

  --mash-rise:20px;
  --mash-slide:32px;
  --mash-stagger:50ms;

  --mash-nav-h:74px;

  /* Legacy Backward-Compatibility Mappings to MASH Tokens */
  --green-950:var(--mash-green-950);
  --green-900:var(--mash-green-900);
  --green-800:var(--mash-green-800);
  --green-700:var(--mash-green-700);
  --green-600:var(--mash-green-600);
  --lime:var(--mash-lime);
  --lime-600:var(--mash-lime-600);
  --lime-200:var(--mash-lime-200);
  --paper:var(--mash-paper);
  --cream:var(--mash-cream);
  --sand:var(--mash-sand);
  --ink:var(--mash-ink);
  --ink-2:var(--mash-ink-2);
  --muted:var(--mash-muted);
  --muted-dark:var(--mash-muted-dark);
  --line:var(--mash-line);
  --line-dark:var(--mash-line-dark);
  --font-display:var(--mash-font-display);
  --font-body:var(--mash-font-body);
  --wrap:var(--mash-wrap);
  --wrap-wide:var(--mash-wrap-wide);
  --wrap-narrow:var(--mash-wrap-narrow);
  --gutter:var(--mash-gutter);
  --radius:var(--mash-radius);
  --radius-sm:var(--mash-radius-sm);
  --section-y:var(--mash-section-y);
  --shadow-sm:var(--mash-shadow-sm);
  --shadow:var(--mash-shadow);
  --shadow-lg:var(--mash-shadow-lg);
  --dur-micro:var(--mash-dur-micro);
  --dur-fast:var(--mash-dur-fast);
  --dur-base:var(--mash-dur-base);
  --dur-reveal:var(--mash-dur-reveal);
  --dur-hero:var(--mash-dur-hero);
  --ease:var(--mash-ease);
  --ease-out:var(--mash-ease-out);
  --ease-in-out:var(--mash-ease-in-out);
  --ease-in:var(--mash-ease-in);
  --rise:var(--mash-rise);
  --slide:var(--mash-slide);
  --stagger:var(--mash-stagger);
  --nav-h:var(--mash-nav-h);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar{
  display:none;
  width:0;
  height:0;
}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:clamp(15.5px,.55vw + 14px,17px);
  line-height:1.72;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
h1,h2,h3,h4,h5,h6{font-family:var(--font-display);font-weight:700;line-height:1.12;margin:0;letter-spacing:-.02em}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
ul,ol{margin:0;padding:0;list-style:none}
::selection{background:var(--lime);color:var(--green-950)}
:focus-visible{outline:3px solid var(--lime);outline-offset:3px;border-radius:6px}

/* ---------- layout helpers (MASH Design System) ---------- */
.wrap, .mash-wrap{width:100%;max-width:var(--mash-wrap);margin-inline:auto;padding-inline:var(--mash-gutter)}
.wrap--wide, .mash-wrap--wide{max-width:var(--mash-wrap-wide)}
.wrap--narrow, .mash-wrap--narrow{max-width:var(--mash-wrap-narrow)}

/* সব সেকশন এক উচ্চতা: কনটেন্ট কম হলেও পূর্ণ স্ক্রিন জুড়ে বসে, কনটেন্ট বেশি
   হলে সেই সেকশন নিজে থেকে বাড়বে (মিন-হাইট সীমা নয়)। ভেতরের কনটেন্ট
   উল্লম্বভাবে সেন্টারে থাকে। স্ক্রল-স্পাই ও অ্যাংকর এখনও একইভাবে কাজ করে। */
.section, .mash-section{
  position:relative;
  padding-block:var(--mash-section-y);
  scroll-margin-top:calc(var(--mash-nav-h) + 16px);
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}
.section > .wrap, .mash-section > .mash-wrap{
  margin-block:auto;
}
/* খুব ছোট উচ্চতার উইন্ডোতে (≤৬৮০px) প্রতিটি সেকশনের নিজের প্যাডিং কমে যাতে
   কনটেন্ট ঠিক ১০০svh-তে বসে। :where()-এর স্পেসিসিটি শূন্য, তাই মডিউল নিজের
   --mash-section-y (যেমন প্রোডাক্টস/বিজনেস-মডেল) একে ওভাররাইড করতে পারে। */
@media (max-height:680px){
  :where(main > .section, main > .mash-section){--mash-section-y:clamp(1rem,3vh,4rem);--section-y:clamp(1rem,3vh,4rem)}
}
.section--paper, .mash-section--paper{background:var(--mash-paper)}
.section--light, .mash-section--light{background:var(--mash-cream)}
.section--dark, .mash-section--dark{background:var(--mash-green-900);color:#eef3ef}
.section--dark h1, .mash-section--dark h1,
.section--dark h2, .mash-section--dark h2,
.section--dark h3, .mash-section--dark h3,
.section--dark h4, .mash-section--dark h4{color:#fff}
.section--dark .section-lead, .mash-section--dark .mash-section-lead{color:var(--mash-muted-dark)}
.section--dark .eyebrow, .mash-section--dark .mash-eyebrow{color:var(--mash-lime)}
.section--narrow .wrap, .mash-section--narrow .mash-wrap{max-width:var(--mash-wrap-narrow)}
.section--wide .wrap, .mash-section--wide .mash-wrap{max-width:var(--mash-wrap-wide)}

/* section head */
.section-head, .mash-section-head{position:relative;isolation:isolate;max-width:780px;margin-bottom:clamp(.7rem,2.2vh,3.4rem)}
.section-head:has(+ .grid, + .cards), .mash-section-head:has(+ .grid, + .cards, + .mash-grid){margin-bottom:clamp(.6rem,1.8vh,3rem)}

/* Watermark Ghost Title (Giant subtle background typography) */
.section-head__watermark{
  position:absolute;
  top:50%;
  left:0;
  transform:translateY(-62%);
  font-family:var(--mash-font-display, inherit);
  font-size:clamp(3rem, 7vw, 6.2rem);
  font-weight:900;
  line-height:1;
  letter-spacing:-0.01em;
  text-transform:uppercase;
  color:rgba(13, 44, 34, 0.038);
  -webkit-text-stroke:1.5px rgba(13, 44, 34, 0.07);
  pointer-events:none;
  user-select:none;
  white-space:nowrap;
  z-index:-1;
  overflow:hidden;
  max-width:100%;
}
.section-head--center .section-head__watermark{
  left:50%;
  transform:translate(-50%, -62%);
  text-align:center;
}
.section-head--split .section-head__watermark{
  top:40%;
}
.section--dark .section-head__watermark{
  color:rgba(255, 255, 255, 0.025);
  -webkit-text-stroke:1.5px rgba(255, 255, 255, 0.075);
}

.section-title, .mash-section-title{position:relative;z-index:1;font-size:clamp(1.6rem,2.4vh + .8vw,3.05rem);margin:.4rem 0 0;text-wrap:balance}
.section-title em, .mash-section-title em{font-style:normal;color:var(--mash-lime-600)}
.section--dark .section-title em, .mash-section--dark .mash-section-title em{color:var(--mash-lime)}
.brand-word, .mash-brand-word{
  display:inline-flex;
  align-items:baseline;
  letter-spacing:0.04em !important;
  font-feature-settings:"kern" 1;
  white-space:nowrap;
  font-size:inherit !important;
  font-weight:inherit !important;
  line-height:inherit !important;
}
.brand-h, .mash-brand-h{
  color:var(--mash-lime, #a4cc3c) !important;
  font-size:inherit !important;
  font-weight:inherit !important;
  font-style:inherit !important;
  line-height:inherit !important;
  display:inline;
  margin:0 !important;
  padding:0 !important;
}
.nav.is-solid .brand-h,
.section--light .brand-h,
.section--paper .brand-h,
.m-catalog .brand-h{
  color:#7fae24 !important;
}
.section-lead, .mash-section-lead{position:relative;z-index:1;margin-top:clamp(.5rem,1.6vh,1rem);font-size:clamp(1.02rem,1.2vw,1.14rem);color:var(--mash-muted);max-width:64ch}

/* Center Head Variant */
.section-head--center{
  max-width:760px;
  margin-inline:auto;
  text-align:center;
}
.section-head--center .eyebrow{
  justify-content:center;
}
.section-head--center .section-lead{
  margin-inline:auto;
}

/* Split Head Variant */
.section-head--split{
  max-width:none;
  display:grid;
  grid-template-columns:1fr;
  gap:1rem;
}
@media (min-width:880px){
  .section-head--split{
    grid-template-columns:1.15fr 0.85fr;
    align-items:end;
    gap:2.5rem;
  }
}
.section-head--split .section-lead{
  margin-top:0;
}

/* eyebrow — PDF-এর "02 / WHO WE ARE" শৈলী */
.eyebrow, .mash-eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--mash-font-display);
  font-size:.72rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  color:var(--mash-green-700);
}
.eyebrow-dot, .mash-eyebrow-dot{width:26px;height:2px;background:currentColor;display:inline-block;flex:none;border-radius:2px}

/* ---------- buttons ---------- */
.btn, .mash-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--mash-font-display);font-weight:600;font-size:.9rem;letter-spacing:.01em;
  padding:.78rem 1.4rem;border-radius:999px;
  transition:transform var(--mash-dur-base) var(--mash-ease),background .3s,color .3s,box-shadow var(--mash-dur-base),border-color .3s;
  white-space:nowrap;position:relative;overflow:hidden;
}
@media (hover: hover){
  .btn:hover, .mash-btn:hover{transform:translateY(-2px)}
  .btn-arrow:hover::after, .mash-btn-arrow:hover::after{transform:translateX(5px)}
}
.btn-solid, .mash-btn-solid{background:var(--mash-green-800);color:#fff;box-shadow:0 12px 26px -14px rgba(13,44,34,.85)}
.btn-solid:hover, .mash-btn-solid:hover{background:var(--mash-green-700);box-shadow:0 18px 34px -14px rgba(13,44,34,.9)}
.btn-accent, .mash-btn-accent{background:var(--mash-lime);color:var(--mash-green-950);box-shadow:0 14px 30px -14px rgba(164,204,60,.9)}
.btn-accent:hover, .mash-btn-accent:hover{background:var(--mash-lime-600)}
.btn-ghost, .mash-btn-ghost{border:1px solid var(--mash-line);color:var(--mash-ink);background:transparent}
.btn-ghost:hover, .mash-btn-ghost:hover{border-color:var(--mash-green-800);background:rgba(13,44,34,.05)}
.section--dark .btn-ghost, .hero .btn-ghost, .mash-section--dark .mash-btn-ghost{border-color:rgba(255,255,255,.36);background:rgba(255,255,255,.08);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fff}
.section--dark .btn-ghost:hover, .hero .btn-ghost:hover, .mash-section--dark .mash-btn-ghost:hover{background:rgba(255,255,255,.18);border-color:#fff}
.btn-lg, .mash-btn-lg{padding:.95rem 1.75rem;font-size:.97rem}
.btn-arrow::after, .mash-btn-arrow::after{content:"→";font-size:1.05em;transition:transform .35s var(--mash-ease)}

/* ---------- generic grids/cards ---------- */
.grid, .mash-grid{display:grid;gap:clamp(.7rem,1.8vh,1.5rem)}
.grid-2, .mash-grid-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr))}
.grid-3, .mash-grid-3{grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr))}
/* সরু/ছোট উইন্ডোতে কলাম সংখ্যা একই (৩ কলাম) রাখতে — কার্ড সরু হলেও সারি কমে
   যাতে ৬০০–৭০০px উচ্চতায়ও সেকশন ঠিক ১০০svh-তে বসে। ডেস্কটপ লেআউট অপরিবর্তিত।
   ৮৯৯px-এর নিচে min মান vw-ভিত্তিক: ৬৪০px-এ ১৮০ (৩ কলাম), ৮৯৯px-এ ২০৭
   (৪ কলাম না হয়) — auto-fit কলাম সংখ্যা কাপা যায় না, তাই vw দিয়েই সীমা। */
@media (max-width:1100px){.grid-3, .mash-grid-3{grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}}
@media (max-width:899px){.grid-3, .mash-grid-3{grid-template-columns:repeat(auto-fit,minmax(min(100%,clamp(180px,23vw,270px)),1fr))}}
.grid-4, .mash-grid-4{grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}

.card, .mash-card{
  position:relative;display:flex;flex-direction:column;
  background:var(--mash-paper);border:1px solid rgba(13,44,34,.14);border-radius:var(--mash-radius);
  box-shadow:0 4px 18px -8px rgba(13,44,34,.08);
  padding:clamp(.9rem,2.2vh,1.9rem);
  transform-style:preserve-3d;
  transition:transform var(--mash-dur-base) var(--mash-ease),box-shadow var(--mash-dur-base) var(--mash-ease),border-color .4s;
}
.card--link, .mash-card--link{display:flex}
@media (hover: hover){
  .card:hover, .mash-card:hover{box-shadow:var(--mash-shadow);border-color:rgba(13,44,34,.2);will-change:transform}
  .card:hover .card-media img, .mash-card:hover .mash-card-media img{transform:scale(1.07)}
  .section--dark .card:hover, .mash-section--dark .mash-card:hover{border-color:rgba(164,204,60,.5);box-shadow:0 30px 60px -34px rgba(0,0,0,.8)}
  .card:hover .card-glare, .mash-card:hover .mash-card-glare{opacity:1}
}
.card-body, .mash-card-body{position:relative;z-index:2;display:flex;flex-direction:column;gap:clamp(.3rem,1vh,.55rem);flex:1}
.card-title, .mash-card-title{font-size:1.14rem;letter-spacing:-.01em}
.card p, .mash-card p{color:var(--mash-muted);font-size:.955rem;line-height:1.6}
.card-eyebrow, .mash-card-eyebrow{
  font-family:var(--mash-font-display);font-size:.68rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--mash-lime-600);
}
.card-icon, .mash-card-icon{
  width:46px;height:46px;display:grid;place-items:center;border-radius:13px;
  background:linear-gradient(140deg,var(--mash-lime-200),rgba(226,240,184,.35));
  color:var(--mash-green-800);font-size:1.3rem;
  transform:translateZ(28px);
}
.card-media, .mash-card-media{
  position:relative;overflow:hidden;border-radius:calc(var(--mash-radius) - 6px);
  aspect-ratio:4/3;background:var(--mash-sand);transform:translateZ(24px);
}
.card-media img, .mash-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--mash-ease-out)}
.card-num, .mash-card-num{
  font-family:var(--mash-font-display);font-weight:800;font-size:2.1rem;
  color:transparent;-webkit-text-stroke:1.4px rgba(13,44,34,.28);
  line-height:1;transform:translateZ(18px);
}
.section--dark .card, .mash-section--dark .mash-card{background:rgba(255,255,255,.055);border-color:var(--mash-line-dark);color:#eaf1ec}
.section--dark .card p, .mash-section--dark .mash-card p{color:var(--mash-muted-dark)}
.section--dark .card-num, .mash-section--dark .mash-card-num{-webkit-text-stroke-color:rgba(255,255,255,.32)}

/* pointer glare */
.card-glare, .mash-card-glare{
  position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.5),transparent 62%);
  opacity:0;transition:opacity .4s;
}
.section--dark .card-glare, .mash-section--dark .mash-card-glare{background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(164,204,60,.16),transparent 62%)}

/* ---------- Interactive Mouse Spotlight (Stripe/Apple style) ---------- */
[data-spotlight], .m-prods-card, .m-catalog__item, .m-contact__card, .m-visual-break__metric-card {
  position: relative;
}
[data-spotlight]::after, .m-prods-card::after, .m-catalog__item::after, .m-contact__card::after, .m-visual-break__metric-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(400px circle at var(--mouse-x, -999px) var(--mouse-y, -999px), rgba(16, 185, 129, 0.12), transparent 70%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 2;
}
[data-spotlight]:hover::after, .m-prods-card:hover::after, .m-catalog__item:hover::after, .m-contact__card:hover::after, .m-visual-break__metric-card:hover::after {
  opacity: 1;
}

/* ---------- Button Shimmer & Magnetic Push Polish ---------- */
.btn-solid, .mash-btn-solid {
  position: relative;
  overflow: hidden;
  will-change: transform;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, background 0.25s ease !important;
}
.btn-solid::before, .mash-btn-solid::before {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.32), transparent);
  transform: skewX(-25deg);
  pointer-events: none;
}
.btn-solid:hover::before, .mash-btn-solid:hover::before {
  animation: mash-btn-shimmer 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes mash-btn-shimmer {
  0% { left: -120%; }
  100% { left: 220%; }
}

/* ---------- reveal / motion (progressive enhancement: blur-to-sharp kinetic) ---------- */
/* No-JS: Content is 100% visible by default; JS enables animated entrance */
.js [data-reveal], .js .mash-reveal{
  opacity:0;
}
.js [data-reveal].is-in, .js .mash-reveal.is-in, .js [data-reveal].is-revealed{
  animation:reveal-up var(--mash-dur-reveal) var(--mash-ease-out) var(--d,0ms) both;
}
.js [data-reveal="left"].is-in, .js .mash-reveal[data-reveal="left"].is-in, .js [data-reveal="left"].is-revealed{
  animation-name:reveal-left;
}
.js [data-reveal="right"].is-in, .js .mash-reveal[data-reveal="right"].is-in, .js [data-reveal="right"].is-revealed{
  animation-name:reveal-right;
}
.js [data-reveal="fade"].is-in, .js .mash-reveal[data-reveal="fade"].is-in, .js [data-reveal="fade"].is-revealed{
  animation-name:reveal-fade;
}

@keyframes reveal-up{
  from{opacity:0;transform:translate3d(0,var(--mash-rise,24px),0) scale(.98);filter:blur(6px)}
  to{opacity:1;transform:none;filter:blur(0)}
}
@keyframes reveal-left{
  from{opacity:0;transform:translate3d(calc(-1 * var(--mash-slide,36px)),0,0);filter:blur(6px)}
  to{opacity:1;transform:none;filter:blur(0)}
}
@keyframes reveal-right{
  from{opacity:0;transform:translate3d(var(--mash-slide,36px),0,0);filter:blur(6px)}
  to{opacity:1;transform:none;filter:blur(0)}
}
@keyframes reveal-fade{
  from{opacity:0;filter:blur(6px)}
  to{opacity:1;filter:blur(0)}
}

/* scroll progress */
.scroll-progress, .mash-scroll-progress{position:fixed;inset:0 0 auto 0;height:3px;z-index:120;background:transparent;pointer-events:none}
.scroll-progress span, .mash-scroll-progress span{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--mash-green-700),var(--mash-lime));transform-origin:left;transform:scaleX(0);will-change:transform}

/* ---------- misc ---------- */
.pill, .mash-pill{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.42rem .95rem;border-radius:999px;border:1px solid var(--mash-line);
  background:rgba(255,255,255,.7);font-size:.82rem;font-weight:500;color:var(--mash-ink-2);
}
.section--dark .pill, .mash-section--dark .mash-pill{background:rgba(255,255,255,.07);border-color:var(--mash-line-dark);color:#dfeae3}
.pill-row, .mash-pill-row{display:flex;flex-wrap:wrap;gap:.6rem}

.rule, .mash-rule{height:1px;background:var(--mash-line);border:0;margin:0}
.section--dark .rule, .mash-section--dark .mash-rule{background:var(--mash-line-dark)}

.list-check li, .list-bullet li, .mash-list-check li{
  position:relative;padding-left:1.85rem;margin-bottom:.7rem;color:var(--mash-muted);font-size:.96rem;
}
.list-check li::before, .list-bullet li::before, .mash-list-check li::before{
  content:"";position:absolute;left:0;top:.55em;width:16px;height:16px;border-radius:5px;
  background:var(--mash-lime);box-shadow:inset 0 0 0 3px var(--mash-paper);
}
.section--dark .list-check li::before, .section--dark .list-bullet li::before, .mash-section--dark .mash-list-check li::before{box-shadow:inset 0 0 0 3px var(--mash-green-900)}
.list-check li::after, .mash-list-check li::after{
  content:"";position:absolute;left:5px;top:.78em;width:6px;height:3px;
  border-left:2px solid var(--mash-green-950);border-bottom:2px solid var(--mash-green-950);
  transform:rotate(-45deg);
}
.list-bullet li::before{background:transparent;box-shadow:inset 0 0 0 2px var(--mash-lime)}
.section--dark .list-check li, .section--dark .list-bullet li, .mash-section--dark .mash-list-check li{color:var(--mash-muted-dark)}

/* split layout: text + media */
.split, .mash-split{display:grid;gap:clamp(1.8rem,4vw,3.4rem);align-items:center;grid-template-columns:1fr}
@media (min-width:640px){
  .split, .mash-split{grid-template-columns:1.05fr .95fr}
  .split--reverse .split-media, .mash-split--reverse .split-media{order:-1}
  .split--wide, .mash-split--wide{grid-template-columns:1fr 1fr}
}

.media-frame, .mash-media-frame{
  position:relative;border-radius:var(--mash-radius);overflow:hidden;
  box-shadow:var(--mash-shadow-lg);transform-style:preserve-3d;
}
.media-frame img, .mash-media-frame img{width:100%;aspect-ratio:4/3;object-fit:cover}
.media-frame::after, .mash-media-frame::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(200deg,rgba(164,204,60,.16),transparent 55%);
  pointer-events:none;
}

/* badge cluster (certifications / logos) */
.badge-row, .mash-badge-row{display:flex;flex-wrap:wrap;gap:clamp(.8rem,2vw,1.4rem);align-items:center}
.badge-chip, .mash-badge-chip{
  display:grid;place-items:center;background:#fff;border:1px solid var(--mash-line);
  border-radius:var(--mash-radius-sm);padding:.7rem 1.1rem;min-height:76px;
  box-shadow:var(--mash-shadow-sm);transition:transform .4s var(--mash-ease),box-shadow .4s;
}
.badge-chip img, .mash-badge-chip img{max-height:52px;width:auto;object-fit:contain;filter:grayscale(.15)}
@media (hover: hover){
  .badge-chip:hover, .mash-badge-chip:hover{transform:translateY(-4px);box-shadow:var(--mash-shadow)}
}

/* marquee (references মডিউল ব্যবহার করে) */
.marquee, .mash-marquee{overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track, .mash-marquee-track{display:flex;gap:clamp(2rem,5vw,4rem);width:max-content;animation:marquee 34s linear infinite}
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track,
.mash-marquee:hover .mash-marquee-track,
.mash-marquee:focus-within .mash-marquee-track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}

/* decorative number watermark */
.ghost-num{
  position:absolute;pointer-events:none;user-select:none;z-index:0;
  font-family:var(--font-display);font-weight:800;line-height:.8;
  font-size:clamp(9rem,26vw,22rem);
  color:transparent;-webkit-text-stroke:1.5px rgba(13,44,34,.07);
}
.section--dark .ghost-num{-webkit-text-stroke-color:rgba(255,255,255,.06)}
.ghost-num--right{right:-2vw;top:6%}
.ghost-num--left{left:-3vw;bottom:4%}

/* background tab pause */
body.is-tab-hidden *{animation-play-state:paused!important}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    animation-delay:0s!important;
    transition-delay:0s!important;
  }
  .js [data-reveal],[data-reveal]{opacity:1!important;transform:none!important;animation:none!important}
}

/* ---------- small screens & mobile responsive optimization ---------- */
@media (max-width:768px){
  .section, .mash-section{
    min-height:auto;
    padding-block:clamp(2.4rem, 5.5vh, 3.8rem);
  }
  .section > .wrap, .mash-section > .mash-wrap{
    margin-block:0;
  }
  .section-head, .mash-section-head{
    margin-bottom:clamp(1rem, 2.8vh, 1.8rem);
  }
  .section-head__watermark{
    font-size:clamp(2.4rem, 11vw, 4rem);
    top:32%;
  }
  .section-title, .mash-section-title{
    font-size:clamp(1.65rem, 6.5vw, 2.25rem);
    line-height:1.15;
  }
  .section-lead, .mash-section-lead{
    font-size:0.92rem;
    line-height:1.55;
    margin-top:0.45rem;
  }
}

@media (max-width:640px){
  .wrap, .mash-wrap{
    padding-inline:clamp(1rem, 4.5vw, 1.4rem);
  }
  .card-media{aspect-ratio:16/11}
  .ghost-num{font-size:5.5rem}
}