/* MATROP Premium Design System — fast, CSS-only motion, site-wide */
:root{
  --m-brand:#e10600;
  --m-brand-dark:#b50500;
  --m-ink:#0b1220;
  --m-ink-soft:#1f2937;
  --m-muted:#64748b;
  --m-line:rgba(15,23,42,.08);
  --m-soft:#f8fafc;
  --m-card:#ffffff;
  --m-radius:20px;
  --m-shadow:0 18px 50px rgba(11,18,32,.10);
  --m-shadow-sm:0 10px 28px rgba(11,18,32,.08);
  --font:"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

html{ scroll-behavior:smooth; }
body{
  font-family:var(--font) !important;
  color:var(--m-ink);
  background:#fff;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{ max-width:100%; height:auto; }
a{ transition:color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease; }

/* Prefer brand tokens from premium system */
:root{
  --brand:var(--m-brand) !important;
  --dark:var(--m-ink) !important;
  --muted:var(--m-muted) !important;
  --soft:var(--m-soft) !important;
  --shadow:var(--m-shadow) !important;
  --radius:var(--m-radius) !important;
}

/* —— Navbar —— */
.navbar{
  background:rgba(255,255,255,.88) !important;
  backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid var(--m-line) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.6);
  padding-top:.55rem !important;
  padding-bottom:.55rem !important;
  transition:box-shadow .25s ease, background .25s ease;
}
.navbar.scrolled{
  box-shadow:0 10px 30px rgba(11,18,32,.08);
  background:rgba(255,255,255,.96) !important;
}
.navbar-brand{
  min-height:54px;
  display:flex !important;
  align-items:center !important;
  outline:none !important;
  box-shadow:none !important;
  border:none !important;
  -webkit-tap-highlight-color:transparent;
}
.navbar-brand:focus,
.navbar-brand:focus-visible,
.navbar-brand:active,
.navbar-brand:focus-within{
  outline:none !important;
  box-shadow:none !important;
  border:none !important;
}
.navbar-brand img,
.matrop-logo{
  display:block !important;
  height:52px !important;
  width:auto !important;
  max-width:220px !important;
  max-height:52px !important;
  opacity:1 !important;
  visibility:visible !important;
  object-fit:contain !important;
  background:transparent !important;
  padding:0 !important;
  border-radius:0 !important;
  outline:none !important;
  box-shadow:none !important;
  border:none !important;
  -webkit-tap-highlight-color:transparent;
}
.navbar-brand:hover img{ transform:scale(1.03); }
.navbar-brand:focus img,
.navbar-brand:active img{
  outline:none !important;
  box-shadow:none !important;
}
.nav-link{
  font-weight:700 !important;
  color:var(--m-ink-soft) !important;
  position:relative;
  border-radius:10px;
}
.nav-link:hover,
.nav-link:focus{ color:var(--m-brand) !important; }
.navbar .dropdown-menu{
  border:1px solid var(--m-line) !important;
  border-radius:14px !important;
  box-shadow:var(--m-shadow) !important;
  padding:.5rem !important;
  overflow:hidden;
}
.navbar .dropdown-item{
  border-radius:10px;
  font-weight:600;
  padding:.55rem .75rem !important;
}
.navbar .dropdown-item:hover{
  background:rgba(225,6,0,.06) !important;
  color:var(--m-brand) !important;
}
.btn-brand{
  background:linear-gradient(135deg, var(--m-brand), var(--m-brand-dark)) !important;
  color:#fff !important;
  border:none !important;
  font-weight:800 !important;
  border-radius:12px !important;
  box-shadow:0 10px 24px rgba(225,6,0,.28);
}
.btn-brand:hover{
  transform:translateY(-2px);
  color:#fff !important;
  box-shadow:0 14px 30px rgba(225,6,0,.36);
}

/* Compact Pay CTA in navbar */
.nav-pay-btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:.45rem !important;
  height:40px !important;
  padding:.35rem 1.05rem !important;
  border-radius:999px !important;
  font-size:.92rem !important;
  font-weight:800 !important;
  letter-spacing:.02em !important;
  line-height:1 !important;
  white-space:nowrap !important;
  text-decoration:none !important;
  background:linear-gradient(135deg, #ff2a1f 0%, var(--m-brand) 55%, var(--m-brand-dark) 100%) !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.22) !important;
  box-shadow:0 8px 20px rgba(225,6,0,.28) !important;
  vertical-align:middle;
}
.nav-pay-btn i{
  font-size:.95rem !important;
  margin:0 !important;
  line-height:1 !important;
}
.nav-pay-btn:hover,
.nav-pay-btn:focus,
.nav-pay-btn:focus-visible,
.nav-pay-btn:visited{
  color:#fff !important;
  outline:none !important;
  text-decoration:none !important;
  transform:translateY(-2px) !important;
  box-shadow:0 12px 26px rgba(225,6,0,.38) !important;
}
.nav-pay-btn:active{
  color:#fff !important;
  text-decoration:none !important;
  transform:translateY(0) scale(.98) !important;
}
.navbar .nav-item .nav-pay-btn{
  margin-top:0 !important;
}
.nav-pay-btn-block{
  width:100%;
  height:48px !important;
  border-radius:14px !important;
  font-size:1rem !important;
}
.btn-outline-dark,
.btn-outline-light{
  border-radius:12px !important;
  font-weight:800 !important;
}
.btn-anim{ position:relative; overflow:hidden; transition:transform .22s ease, box-shadow .22s ease !important; }
.btn-anim::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(110deg, transparent 20%, rgba(255,255,255,.28) 45%, transparent 70%);
  transform:translateX(-120%);
  pointer-events:none;
}
.btn-anim:hover::after{ animation:mShine .7s ease; }
.btn-anim:hover{ transform:translateY(-3px); }
.btn-anim:active{ transform:translateY(0) scale(.98); }
.m-btn-pop{ font-weight:900 !important; border-radius:14px !important; }
.m-btn-pop:hover{ box-shadow:0 14px 28px rgba(0,0,0,.18); }

/* —— Red CTA band (readable text) —— */
.m-cta-band{
  background:linear-gradient(125deg, #c50500 0%, var(--m-brand) 45%, #ff2a1f 100%) !important;
  color:#fff !important;
  padding:4.2rem 0 !important;
  overflow:hidden;
  position:relative;
}
.m-cta-band::before{
  content:"";
  position:absolute; inset:-10%;
  background:radial-gradient(circle at 20% 20%, rgba(255,255,255,.14), transparent 42%);
  pointer-events:none;
}
.m-cta-band .m-cta-title,
.m-cta-band h2.home-sec-title,
.m-cta-band h2{
  color:#ffffff !important;
  position:relative;
  z-index:1;
  text-shadow:0 1px 2px rgba(0,0,0,.25);
}
.m-highlight-pill{
  display:inline-block;
  color:#111827 !important;
  background:#fff !important;
  padding:.1rem .55rem;
  border-radius:10px;
}
.m-cta-copy{
  color:rgba(255,255,255,.95) !important;
  font-size:1.05rem;
  line-height:1.65;
  position:relative;
  z-index:1;
}
.m-cta-tags{ position:relative; z-index:1; }
.m-cta-pill,
.m-cta-band .home-pill.m-cta-pill{
  background:#fff !important;
  color:#111827 !important;
  border:1px solid rgba(255,255,255,.55) !important;
  box-shadow:0 8px 20px rgba(0,0,0,.12) !important;
  padding:.55rem .9rem !important;
  border-radius:999px !important;
  font-weight:800 !important;
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  transition:transform .22s ease, box-shadow .22s ease;
}
.m-cta-pill i{ color:var(--m-brand) !important; }
.m-cta-pill:hover{
  transform:translateY(-3px) scale(1.03);
  box-shadow:0 14px 26px rgba(0,0,0,.18) !important;
}
.m-cta-card{
  position:relative;
  z-index:1;
  padding:1.5rem;
  border-radius:20px;
  background:rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(10px);
  box-shadow:0 18px 40px rgba(0,0,0,.18);
  transition:transform .28s ease, box-shadow .28s ease;
}
.m-cta-card:hover{
  transform:translateY(-6px);
  box-shadow:0 26px 50px rgba(0,0,0,.25);
}
.m-cta-card-title{ font-size:1.1rem; color:#fff !important; }
.m-cta-card-sub{ color:rgba(255,255,255,.9) !important; }
.m-cta-card .btn-light{
  color:#111827 !important;
  font-weight:900 !important;
}
.m-cta-card .btn-outline-light{
  color:#fff !important;
  border-width:2px !important;
  font-weight:900 !important;
}
.m-cta-card .btn-outline-light:hover{
  background:#fff !important;
  color:#111827 !important;
}

/* Interactive nav links underline */
.navbar .nav-link::after{
  content:"";
  position:absolute;
  left:12%; right:12%;
  bottom:4px;
  height:2px;
  background:var(--m-brand);
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .22s ease;
  border-radius:2px;
}
.navbar .nav-link:hover::after{ transform:scaleX(1); }

/* Stat cards pulse lightly */
.stat-card{
  transition:transform .25s ease, box-shadow .25s ease;
}
.stat-card:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 28px rgba(225,6,0,.12);
}

@keyframes mPulseSoft{
  0%,100%{ transform:scale(1); box-shadow:0 0 0 0 rgba(255,255,255,.0); }
  50%{ transform:scale(1.03); box-shadow:0 0 0 6px rgba(255,255,255,.12); }
}

/* —— Hero —— */
.hero-modern{
  background:
    radial-gradient(900px 420px at 12% 0%, rgba(225,6,0,.10), transparent 55%),
    radial-gradient(700px 380px at 90% 20%, rgba(15,23,42,.05), transparent 50%),
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
  padding-top:1rem;
  overflow:hidden;
  position:relative;
}

/* Hero-only code rain (safe: inside hero, under .container) */
.hero-modern > .tech-rain{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
  opacity:.45;
}
.tech-rain-col{
  position:absolute;
  top:-20%;
  left:var(--x, 10%);
  max-width:180px;
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:11px;
  line-height:1.7;
  color:rgba(15,23,42,.32);
  white-space:nowrap;
  animation:techRain 16s linear infinite;
  animation-delay:var(--d, 0s);
}
.tech-rain-col span{ display:block; }
.tech-rain-col span:nth-child(3n){ color:rgba(225,6,0,.42); }
@keyframes techRain{
  0%{ transform:translateY(0); opacity:0; }
  12%{ opacity:1; }
  88%{ opacity:1; }
  100%{ transform:translateY(60vh); opacity:0; }
}

.hero-modern > .container{
  position:relative;
  z-index:2;
}

.code-float-inline{
  display:block !important;
  position:relative;
  z-index:2;
  opacity:1 !important;
  visibility:visible !important;
  max-width:100%;
  pointer-events:none;
  animation:codeFloat 6.5s ease-in-out infinite alternate;
}
.code-win{
  width:100%;
  max-width:100%;
  background:#0f172a;
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  box-shadow:0 16px 36px rgba(11,18,32,.22);
  overflow:hidden;
}
.code-win-bar{
  display:flex; align-items:center; gap:6px;
  padding:8px 12px;
  background:rgba(255,255,255,.04);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.code-win-bar .dot{ width:8px;height:8px;border-radius:50%; display:inline-block; }
.code-win-bar .dot.r{ background:#ff5f57; }
.code-win-bar .dot.y{ background:#febc2e; }
.code-win-bar .dot.g{ background:#28c840; }
.code-win-title{
  margin-left:8px; font-size:10px; font-weight:700;
  color:rgba(255,255,255,.55);
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.code-win-body{
  margin:0; padding:12px 14px;
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:11px; line-height:1.65; color:rgba(255,255,255,.82);
  white-space:pre;
}
.code-win-body .c-k{ color:#ff8a80; }
.code-win-body .c-type{ color:#7dd3fc; }
.code-win-body .c-cmt{ color:rgba(255,255,255,.35); }
.code-win-body .c-ok{ color:#4ade80; }
.code-win-body .c-str{ color:#fcd34d; }
.code-win-body .c-cursor{
  display:inline-block; color:#fff;
  animation:blinkCursor 1s steps(1) infinite;
}
@keyframes blinkCursor{ 0%,50%{ opacity:1; } 51%,100%{ opacity:0; } }
@keyframes codeFloat{
  0%{ transform:translateY(0); }
  100%{ transform:translateY(-6px); }
}

@media (max-width:991px){
  .hero-modern > .tech-rain{ opacity:.5; }
  .tech-rain-col{ font-size:10px; color:rgba(15,23,42,.4); }
  .code-win-body{ font-size:10.5px; }
}

.hero-blob{
  filter:blur(2px);
  animation:mFloat 10s ease-in-out infinite alternate;
  z-index:0;
}
.hero-blob-2{ animation-delay:-4s; animation-duration:12s; }
.hero-title{
  font-weight:900 !important;
  letter-spacing:-.03em !important;
  line-height:1.12 !important;
  font-size:clamp(1.85rem, 3.6vw, 3rem) !important;
  color:var(--m-ink) !important;
  opacity:1 !important;
  animation:none;
}
.hero-highlight{
  display:block;
  margin-top:.45rem;
  color:var(--m-brand) !important;
  font-size:.62em !important;
  font-weight:800 !important;
  letter-spacing:-.01em;
}
.hero-lead{
  font-size:1.08rem !important;
  line-height:1.7 !important;
  color:var(--m-muted) !important;
  max-width:40rem;
  opacity:1 !important;
  animation:none;
}
.badge-chip,
.hero-badge .badge-chip,
.pill,
.home-pill{
  border:1px solid var(--m-line) !important;
  background:#fff !important;
  color:var(--m-ink) !important;
  box-shadow:var(--m-shadow-sm);
  backdrop-filter:blur(8px);
  font-weight:700 !important;
}
.home-pill i,
.pill i,
.badge-chip i{
  color:var(--m-brand) !important;
  margin-right:.35rem;
}
.hero-panel,
.home-card,
.wf-step,
.service-card,
.card,
.sol-card{
  border:1px solid var(--m-line) !important;
  border-radius:var(--m-radius) !important;
  box-shadow:var(--m-shadow-sm) !important;
  background:var(--m-card) !important;
  transition:transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease, border-color .28s ease;
  will-change:transform;
}
.hero-panel:hover,
.home-card:hover,
.wf-step:hover,
.service-card:hover,
.sol-card:hover,
.card:hover{
  transform:translateY(-8px) scale(1.01);
  box-shadow:0 22px 48px rgba(11,18,32,.16) !important;
  border-color:rgba(225,6,0,.28) !important;
}
.home-card .home-ico,
.wf-step .wf-badge{
  transition:transform .28s ease, background .28s ease;
}
.home-card:hover .home-ico,
.wf-step:hover .wf-badge{
  transform:scale(1.08) rotate(-4deg);
}
.stat-card{
  border-radius:16px !important;
  background:linear-gradient(180deg,#fff, #f8fafc) !important;
  border:1px solid var(--m-line);
}
.stat-value{ color:var(--m-brand) !important; font-weight:900 !important; }
.warn-icon{
  background:rgba(225,6,0,.1) !important;
  color:var(--m-brand) !important;
}

/* —— Sections —— */
.section,
.home-sec{
  position:relative;
}
.section-title,
.home-sec-title{
  font-weight:900 !important;
  letter-spacing:-.025em !important;
  color:var(--m-ink) !important;
}
.m-cta-band .home-sec-title,
.m-cta-band .m-cta-title,
.m-cta-band h2,
#whychoose .home-sec-title,
#whychoose h2{
  color:#ffffff !important;
}
.m-cta-band .m-highlight-pill{
  color:#111827 !important;
  background:#ffffff !important;
}
.section-sub,
.home-sec-sub{
  color:var(--m-muted) !important;
  line-height:1.7 !important;
}
.home-ico{
  background:rgba(225,6,0,.08) !important;
  color:var(--m-brand) !important;
  border-radius:14px;
}

/* —— Cards grid polish —— */
.wf-badge{
  background:linear-gradient(135deg, rgba(225,6,0,.12), rgba(225,6,0,.04)) !important;
  color:var(--m-brand) !important;
}

/* —— Footer —— */
footer{
  background:linear-gradient(180deg, #17131a 0%, #120f14 100%) !important;
  border-top:1px solid rgba(255,255,255,.06);
}
footer a:hover{ color:var(--m-brand) !important; text-decoration:none !important; }

/* —— Bottom bar / FABs —— */
.bottom-bar{
  backdrop-filter:blur(12px);
  background:rgba(255,255,255,.94) !important;
  border-top:1px solid var(--m-line) !important;
  box-shadow:0 -10px 30px rgba(11,18,32,.08);
}
.bb-link.active{ color:var(--m-brand) !important; }
.fab{
  box-shadow:0 12px 28px rgba(11,18,32,.2) !important;
  transition:transform .2s ease, box-shadow .2s ease;
}
.fab:hover{ transform:translateY(-3px) scale(1.04); }
.fab-wa{ background:#25D366 !important; }
.fab-call{ background:var(--m-ink) !important; }

/* —— Premium technical mobile menu —— */
.matrop-toggler{
  width:44px;height:44px;padding:0;border:1px solid var(--m-line) !important;
  border-radius:12px !important;background:#fff !important;
  display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  box-shadow:0 6px 16px rgba(11,18,32,.06);
}
.matrop-toggler:focus{ box-shadow:0 0 0 3px rgba(225,6,0,.12) !important; outline:none !important; }
.matrop-toggler .mtog-bar{
  display:block;width:18px;height:2px;border-radius:2px;background:var(--m-ink);
  transition:transform .28s ease, opacity .2s ease, width .2s ease;
}
.matrop-toggler[aria-expanded="true"] .mtog-bar:nth-child(1),
body:has(#mobileMenu.show) .matrop-toggler .mtog-bar:nth-child(1){
  transform:translateY(7px) rotate(45deg);
}
.matrop-toggler[aria-expanded="true"] .mtog-bar:nth-child(2),
body:has(#mobileMenu.show) .matrop-toggler .mtog-bar:nth-child(2){
  opacity:0; width:0;
}
.matrop-toggler[aria-expanded="true"] .mtog-bar:nth-child(3),
body:has(#mobileMenu.show) .matrop-toggler .mtog-bar:nth-child(3){
  transform:translateY(-7px) rotate(-45deg);
}

.offcanvas.m-menu{
  width:min(100vw, 380px) !important;
  border:0 !important;
  background:
    radial-gradient(480px 200px at 100% 0%, rgba(225,6,0,.08), transparent 55%),
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
  color:var(--m-ink);
}
.m-menu-glow{
  position:absolute; inset:0 0 auto 0; height:120px;
  background:linear-gradient(180deg, rgba(225,6,0,.06), transparent);
  pointer-events:none; z-index:0;
}
.m-menu-head{
  position:relative; z-index:1;
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
  width:100%;
  border-bottom:1px solid rgba(15,23,42,.08) !important;
  padding:1rem 1.1rem !important;
}
.m-menu-brand{
  display:flex;
  align-items:center;
  gap:12px;
  flex:1 1 auto;
  min-width:0;
  margin-right:auto;
}
.m-menu-logo{
  height:36px; width:auto; display:block; flex-shrink:0;
  outline:none !important; border:0 !important; box-shadow:none !important;
}
.m-menu .offcanvas-title{
  margin:0; font-size:1.1rem; font-weight:900; color:var(--m-ink); letter-spacing:-.02em;
  white-space:nowrap;
}
.m-menu-close{
  width:40px; height:40px; min-width:40px; flex:0 0 40px;
  margin-left:auto !important;
  border-radius:12px; border:1px solid rgba(15,23,42,.1);
  background:#fff; color:var(--m-ink);
  display:inline-flex !important; align-items:center; justify-content:center;
  position:relative; z-index:2;
  transition:transform .2s ease, background .2s ease, color .2s ease;
}
.m-menu-close:hover{ background:var(--m-brand); color:#fff; transform:rotate(90deg); }

.m-menu-body{
  position:relative; z-index:1;
  padding:1rem 1rem 7.5rem !important;
  color:var(--m-ink);
}
.m-menu-grid{ display:grid; gap:8px; margin-bottom:12px; }
.m-menu-stack{ display:grid; gap:8px; margin-bottom:12px; }
.m-menu-tile,
.m-acc summary{
  display:flex; align-items:center; gap:12px;
  padding:12px 12px; border-radius:14px;
  background:#fff; border:1px solid rgba(15,23,42,.08);
  box-shadow:0 8px 20px rgba(11,18,32,.05);
  text-decoration:none !important; color:inherit;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  animation:mMenuIn .45s ease both;
  animation-delay:calc(var(--i, 0) * .05s);
}
.m-menu-tile:active,
.m-acc summary:active{ transform:scale(.98); }
.m-menu-tile:hover,
.m-acc summary:hover{
  border-color:rgba(225,6,0,.28);
  box-shadow:0 12px 26px rgba(225,6,0,.10);
  transform:translateY(-2px);
}
.m-ico{
  width:40px; height:40px; min-width:40px; border-radius:12px;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(225,6,0,.08); color:var(--m-brand); font-size:15px;
}
.m-txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.m-txt::before{
  content:attr(data-kicker);
  display:block;
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.05em;
  line-height:1.2;
  color:var(--m-brand);
  opacity:.9;
}
.m-txt:not([data-kicker])::before{ content:"// nav.item"; }
.m-txt strong{ font-size:.95rem; font-weight:800; line-height:1.2; color:var(--m-ink); }
.m-arr{ color:#94a3b8; font-size:12px; }
.m-plus{ color:#94a3b8; font-size:13px; transition:transform .25s ease; }

.m-acc{ margin-bottom:0; animation:mMenuIn .45s ease both; animation-delay:calc(var(--i, 0) * .05s); }
.m-acc summary{
  list-style:none; cursor:pointer; user-select:none;
}
.m-acc summary::-webkit-details-marker{ display:none; }
.m-acc[open] summary{
  border-color:rgba(225,6,0,.3);
  background:linear-gradient(180deg,#fff, #fff7f7);
}
.m-acc[open] .m-plus{ transform:rotate(45deg); color:var(--m-brand); }
.m-acc-list{
  display:grid; gap:6px; padding:8px 2px 4px 2px;
}
.m-acc-list a{
  display:flex; flex-wrap:wrap; align-items:center; align-content:center; gap:10px;
  padding:11px 12px; border-radius:12px;
  background:#fff; border:1px solid rgba(15,23,42,.06);
  color:var(--m-ink); text-decoration:none !important; font-weight:700; font-size:.88rem;
  transition:transform .18s ease, border-color .18s ease, background .18s ease;
}
.m-acc-list a::before{
  content:attr(data-kicker);
  flex:0 0 100%;
  order:-1;
  margin:0 0 2px 38px;
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:.58rem;
  font-weight:700;
  letter-spacing:.05em;
  line-height:1.2;
  color:var(--m-brand);
  opacity:.88;
}
.m-acc-list a:not([data-kicker])::before{ content:"// nav.link"; }
.m-acc-list a i{
  width:28px; height:28px; border-radius:8px;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(15,23,42,.05); color:var(--m-brand); font-size:12px;
}
.m-acc-list a:hover{
  border-color:rgba(225,6,0,.25);
  background:#fff8f8;
  transform:translateX(3px);
}

.m-menu-actions{
  margin-top:14px;
  animation:mMenuIn .45s ease both;
  animation-delay:calc(var(--i, 0) * .05s);
}
.m-menu-help{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px; }
.m-help-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 12px; border-radius:12px; font-weight:800; font-size:.88rem;
  text-decoration:none !important; border:1px solid rgba(15,23,42,.08); background:#fff;
}
.m-help-btn.wa{ color:#128C7E; }
.m-help-btn.mail{ color:var(--m-brand); }
@keyframes mMenuIn{
  from{ opacity:0; transform:translateX(14px); }
  to{ opacity:1; transform:none; }
}
#mobileMenu.show .m-menu-tile,
#mobileMenu.show .m-acc,
#mobileMenu.show .m-menu-actions{
  animation-name:mMenuIn;
}

@media (prefers-reduced-motion: reduce){
  .m-menu-tile, .m-acc, .m-menu-actions{ animation:none !important; }
  .matrop-toggler .mtog-bar{ transition:none !important; }
}

/* —— Motion: NEVER hide content (was causing blank/"loading" feel) —— */
.reveal,
.js-anim .reveal:not(.revealed){
  opacity:1 !important;
  transform:none !important;
}
.reveal.revealed{
  opacity:1;
  transform:none;
}

/* Below-fold sections paint later for faster first load */
.section,
.home-sec,
footer,
#workflow,
#why-us,
#whychoose{
  content-visibility:auto;
  contain-intrinsic-size:1px 720px;
}
#whychoose,
.m-cta-band{
  content-visibility:visible; /* keep CTA ready; text must stay readable */
}

/* Page content containers */
.container{ max-width:1140px; }

/* Form premium */
.form-control, .form-select{
  border-radius:12px !important;
  border-color:var(--m-line) !important;
  padding:.7rem .9rem !important;
}
.form-control:focus, .form-select:focus{
  border-color:rgba(225,6,0,.45) !important;
  box-shadow:0 0 0 .25rem rgba(225,6,0,.12) !important;
}

/* SEO readable headings on inner pages */
h1,h2,h3{ color:var(--m-ink); }

/* Code-comment labels above section headings (all pages) */
h2::before,
.section-title::before,
.home-sec-title::before,
.ov-title:is(h1,h2)::before,
.c-title:is(h1,h2)::before,
.sd-title:is(h1,h2)::before,
.i-title:is(h1,h2)::before{
  content:attr(data-kicker);
  display:block;
  margin:0 0 .45rem;
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.06em;
  line-height:1.35;
  color:var(--m-brand);
  opacity:.92;
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  word-break:break-word;
  max-width:100%;
}
h2:not([data-kicker])::before,
.section-title:not([data-kicker])::before,
.home-sec-title:not([data-kicker])::before,
.ov-title:is(h1,h2):not([data-kicker])::before,
.c-title:is(h1,h2):not([data-kicker])::before,
.sd-title:is(h1,h2):not([data-kicker])::before,
.i-title:is(h1,h2):not([data-kicker])::before{
  content:none;
  display:none;
}
#whychoose h2::before,
.m-cta-band h2::before,
.m-cta-band .m-cta-title::before,
h2.text-white::before,
.text-white > h2::before,
.bg-dark h2::before,
[class*="cta"] h2.text-white::before{
  color:rgba(255,255,255,.92);
}
.hero-title::before,
.hero-modern h1::before,
.offcanvas-title::before,
.navbar h2::before,
footer h5::before,
.modal-title::before{
  content:none !important;
  display:none !important;
}

/* —— Tech polish: system bar, grid, path, selection —— */
.m-sysbar{
  background:#0b1220;
  color:rgba(226,232,240,.88);
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.04em;
  border-bottom:1px solid rgba(225,6,0,.35);
  position:relative;
  z-index:1031;
  overflow:hidden;
}
.m-sysbar-track{
  width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  touch-action:pan-x;
  scrollbar-width:none;
  mask-image:linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
}
.m-sysbar-track::-webkit-scrollbar{ display:none; height:0; }
.m-sysbar-inner{
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  gap:.35rem .55rem;
  padding:.42rem .75rem;
  width:max-content;
  white-space:nowrap;
}
.m-sysbar-marquee{
  animation:mSysScroll 38s linear infinite;
}
.m-sysbar:hover .m-sysbar-marquee{ animation-play-state:paused; }
@keyframes mSysScroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
.m-sys-dot{
  width:7px; height:7px; border-radius:50%;
  background:#22c55e;
  box-shadow:0 0 0 0 rgba(34,197,94,.55);
  animation:mPulse 1.8s ease infinite;
  flex:0 0 auto;
}
.m-sys-sep{ opacity:.45; flex:0 0 auto; }
.m-sysbar-inner > span{ flex:0 0 auto; }
@keyframes mPulse{
  0%{ box-shadow:0 0 0 0 rgba(34,197,94,.55); }
  70%{ box-shadow:0 0 0 8px rgba(34,197,94,0); }
  100%{ box-shadow:0 0 0 0 rgba(34,197,94,0); }
}
/* Mobile: swipe to see all + faster auto scroll */
@media (max-width: 991.98px){
  .m-sysbar-marquee{
    animation:mSysScroll 26s linear infinite;
  }
  .m-sysbar-track{
    cursor:grab;
  }
}
@media (prefers-reduced-motion: reduce){
  .m-sysbar-marquee{ animation:none !important; transform:none !important; }
}
.m-buildline{
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.03em;
  color:#64748b !important;
}
::selection{
  background:rgba(225,6,0,.18);
  color:var(--m-ink);
}
body{
  background-color:#f7f8fb !important;
  background-image:
    linear-gradient(rgba(15,23,42,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,.03) 1px, transparent 1px) !important;
  background-size:28px 28px !important;
  background-attachment:fixed !important;
}

.navbar{
  border-bottom:1px solid rgba(15,23,42,.08) !important;
}
.section > .container,
.home-sec > .container{
  position:relative;
  z-index:1;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation:none !important;
    transition:none !important;
  }
  .js-anim .reveal:not(.revealed){ opacity:1; transform:none; }
  .tech-rain, .page-tech-rain{ display:none !important; }
  .code-float-inline{ animation:none !important; transform:none !important; }
}

@keyframes mRise{
  from{ opacity:0; transform:translateY(16px); }
  to{ opacity:1; transform:none; }
}
@keyframes mFloat{
  from{ transform:translate3d(0,0,0) scale(1); }
  to{ transform:translate3d(2%, -3%, 0) scale(1.05); }
}
@keyframes mShine{
  to{ transform:translateX(120%); }
}

@media (max-width: 991.98px){
  .hero-title{ font-size:1.85rem !important; }
  .navbar-brand img,
  .matrop-logo{ height:44px !important; max-height:44px !important; }
}