/* MASTRapps additions on top of the original MASTRlabs stylesheets.
   Only layout for the app grid and app pages. Colours, fonts, header,
   footer and motion come from the MASTRlabs assets. */

.apps-banner {
  padding: 9px 22px;
  border-bottom: 1px solid rgba(57, 255, 20, .2);
  background: #04170a;
  color: #b7ff31;
  font: 800 11px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .12em;
  text-align: center;
  text-transform: uppercase;
}

.apps-wrap { width: min(1220px, 100%); margin: 0 auto; padding: 0 clamp(18px, 4vw, 40px); }
.apps-section { padding: clamp(42px, 5vw, 78px) 0; }
.apps-eyebrow {
  display: block; color: #b7ff31;
  font: 800 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .18em; text-transform: uppercase;
}
.apps-h1 {
  margin: 20px 0 0; color: #f3fff4; font-family: Orbitron, Arial, sans-serif;
  font-size: clamp(38px, 5.6vw, 82px); font-weight: 900; letter-spacing: -.05em; line-height: .98;
}
.apps-h2 {
  margin: 0; color: #f3fff4; font-family: Orbitron, Arial, sans-serif;
  font-size: clamp(26px, 3.4vw, 46px); font-weight: 900; letter-spacing: -.04em; line-height: 1.05;
}
.apps-h1 em, .apps-h2 em { color: #39ff14; font-style: normal; }
.apps-lead { max-width: 760px; margin: 24px 0 0; color: #bdd8c2; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.7; }
.apps-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.apps-head { margin-bottom: 28px; }

.apps-stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin-top: 34px;
  border: 1px solid rgba(57, 255, 20, .28); background: rgba(57, 255, 20, .22);
}
.apps-stats div { padding: 18px 20px; background: rgba(3, 16, 6, .96); }
.apps-stats strong { display: block; color: #b7ff31; font: 900 24px/1 Orbitron, Arial, sans-serif; }
.apps-stats span { color: #a8c7af; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }

.apps-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; }
.apps-card {
  position: relative; display: flex; flex-direction: column; padding: 24px 24px 20px; overflow: hidden;
  border: 1px solid rgba(57, 255, 20, .34);
  background: linear-gradient(145deg, rgba(17, 69, 27, .98), rgba(5, 28, 10, .99) 76%);
  box-shadow: 0 20px 45px rgba(0, 0, 0, .26), inset 0 1px rgba(183, 255, 49, .15);
  text-decoration: none;
}
.apps-card-head { display: flex; align-items: center; gap: 14px; }
.apps-card-head img { width: 56px; height: 56px; border-radius: 14px; border: 1px solid rgba(57, 255, 20, .28); }
.apps-card h3 { margin: 0; color: #f5fff6; font-family: Orbitron, Arial, sans-serif; font-size: 20px; font-weight: 900; }
.apps-card small { color: #8eaa94; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.apps-card p { margin: 14px 0 0; color: #c6d9ca; font-size: 15px; line-height: 1.6; }
.apps-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 18px; }
.apps-state { display: inline-flex; align-items: center; gap: 7px; color: #8eaa94; font: 700 11px/1 Rajdhani, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.apps-state i { width: 8px; height: 8px; border-radius: 50%; background: #8eaa94; }
.apps-state.live { color: #b7ff31; }
.apps-state.live i { background: #39ff14; box-shadow: 0 0 12px rgba(57, 255, 20, .8); animation: appsPulse 2.4s ease-in-out infinite; }
@keyframes appsPulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.apps-go { color: #d4ff91; font: 700 12px/1 Rajdhani, sans-serif; letter-spacing: .08em; text-transform: uppercase; }

.apps-shell { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(26px, 4vw, 60px); align-items: center; padding: clamp(38px, 5vw, 76px) 0 clamp(20px, 2vw, 34px); }
.apps-shot { text-align: center; }
.apps-icon { width: min(300px, 74%); border: 1px solid rgba(57, 255, 20, .34); border-radius: 34px; box-shadow: 0 34px 90px rgba(0, 0, 0, .55), 0 0 54px rgba(57, 255, 20, .12); }
.apps-icon.dim { opacity: .55; }

.apps-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(262px, 1fr)); gap: 16px; }
.apps-feature { padding: 24px; border: 1px solid rgba(57, 255, 20, .3); background: linear-gradient(145deg, rgba(13, 57, 23, .98), rgba(4, 24, 9, .99) 78%); }
.apps-feature span { color: #7dff55; font: 900 10px/1 Orbitron, Arial, sans-serif; letter-spacing: .1em; }
.apps-feature h3 { margin: 14px 0 6px; color: #f5fff6; font-family: Orbitron, Arial, sans-serif; font-size: 18px; }
.apps-feature strong { display: block; margin-bottom: 6px; color: #b7ff31; font-size: 13px; }
.apps-feature p { margin: 0; color: #c2d8c6; font-size: 15px; line-height: 1.62; }

.apps-panel { padding: clamp(26px, 3vw, 40px); border: 1px solid rgba(183, 255, 49, .5); background: linear-gradient(125deg, rgba(13, 66, 23, .98), rgba(4, 25, 9, .99)); box-shadow: 0 24px 65px rgba(0, 0, 0, .32), inset 0 1px rgba(202, 255, 94, .2); }
.apps-ticks { margin: 18px 0 0; padding: 0; list-style: none; }
.apps-ticks li { position: relative; margin-bottom: 10px; padding-left: 26px; color: #c2d8c6; line-height: 1.62; }
.apps-ticks li::before { content: '✓'; position: absolute; left: 0; color: #39ff14; font-weight: 700; }
.apps-warn { margin-top: 16px; padding: 14px 16px; border-left: 3px solid #ffb020; background: rgba(255, 176, 32, .08); color: #ffdca1; }

.apps-plats { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.apps-plat { padding: 24px; border: 1px solid rgba(57, 255, 20, .3); background: rgba(6, 29, 11, .86); }
.apps-plat.available { border-color: rgba(183, 255, 49, .62); }
.apps-plat .code { color: #b7ff31; font: 900 10px/1 Orbitron, Arial, sans-serif; letter-spacing: .14em; }
.apps-plat h3 { margin: 12px 0 4px; color: #f5fff6; font-family: Orbitron, Arial, sans-serif; font-size: 18px; }
.apps-plat small { color: #8eaa94; }
.apps-plat p { color: #c2d8c6; font-size: 15px; }
.apps-plat ul { margin: 12px 0 0; padding-left: 18px; color: #a9c3af; font-size: 14px; }
.apps-plat .stage { display: inline-block; margin-top: 14px; padding: 5px 10px; border: 1px solid rgba(57, 255, 20, .28); color: #8eaa94; font-size: 12px; }

.apps-stack { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1px; margin-top: 22px; border: 1px solid rgba(57, 255, 20, .27); background: rgba(57, 255, 20, .27); }
.apps-stack div { padding: 16px; background: #061d0b; }
.apps-stack span { display: block; color: #a9c3af; font-size: 12px; }
.apps-stack strong { color: #b7ff31; font: 900 13px/1.3 Orbitron, Arial, sans-serif; }

.apps-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px; border: 1px solid rgba(57, 255, 20, .27); background: rgba(57, 255, 20, .27); }
.apps-metrics div { padding: 18px; background: #061d0b; }
.apps-metrics strong { display: block; color: #b7ff31; font: 900 22px/1 Orbitron, Arial, sans-serif; }
.apps-metrics span { color: #effff1; font-size: 14px; }
.apps-metrics small { display: block; margin-top: 4px; color: #8eaa94; font-size: 12px; }

.apps-faq { margin-bottom: 10px; border: 1px solid rgba(57, 255, 20, .28); background: rgba(4, 18, 9, .86); }
.apps-faq summary { padding: 16px 20px; color: #d4ff91; font: 700 16px/1.4 Rajdhani, sans-serif; cursor: pointer; }
.apps-faq p { margin: 0; padding: 0 20px 18px; color: #c2d8c6; font-size: 15px; line-height: 1.65; }

.apps-dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.apps-dlbox { display: block; padding: 18px 20px; border: 1px solid rgba(57, 255, 20, .32); background: rgba(3, 20, 8, .9); text-decoration: none; }
.apps-dlbox strong { display: block; color: #effff1; font: 900 14px/1.3 Orbitron, Arial, sans-serif; }
.apps-dlbox small { color: #8eaa94; font-size: 12px; word-break: break-all; }

.apps-donate code { display: block; margin: 14px 0; padding: 14px; border: 1px dashed rgba(57, 255, 20, .42); color: #b7ff31; font-size: 13px; word-break: break-all; }
.apps-note { margin-top: 14px; color: #8eaa94; font-size: 14px; line-height: 1.6; }
.apps-back { margin-top: 30px; }
.apps-back a { color: #d4ff91; font-weight: 700; text-decoration: none; }

@media (max-width: 1000px) { .apps-shell { grid-template-columns: 1fr; } .apps-stats { grid-template-columns: repeat(2, 1fr); } }
@media (hover: hover) and (pointer: fine) {
  .apps-card, .apps-feature, .apps-plat { transition: transform 210ms ease, border-color 210ms ease, box-shadow 210ms ease; }
  .apps-card:hover, .apps-feature:hover, .apps-plat:hover { transform: translateY(-6px); border-color: rgba(183, 255, 49, .82); box-shadow: 0 30px 72px rgba(57, 255, 20, .15); }
}
@media (prefers-reduced-motion: reduce) { .apps-state.live i { animation: none; } }

/* Home hero with brand art, in the MASTRlabs rhythm */
.apps-hero-split { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); align-items: center; gap: clamp(30px, 4vw, 70px); }
.apps-hero-copy { width: 100%; }
.apps-hero-art { position: relative; display: grid; place-items: center; }
.apps-hero-art::before { content: ''; position: absolute; inset: 6%; filter: blur(24px); background: radial-gradient(circle, rgba(107, 255, 42, .5), rgba(57, 255, 20, .12) 48%, transparent 72%); border-radius: 50%; animation: auraPulse 5s ease-in-out infinite; }
.apps-hero-art img { position: relative; width: min(82%, 430px); border-radius: 26%; border: 1px solid rgba(188, 255, 48, .7); box-shadow: 0 40px 62px rgba(0, 0, 0, .6), 0 0 40px rgba(57, 255, 20, .32); animation: logoFloat 6s ease-in-out infinite; }
@media (max-width: 1000px) { .apps-hero-split { grid-template-columns: 1fr; } .apps-hero-art { order: -1; } .apps-hero-art img { width: min(62%, 320px); } }
@media (prefers-reduced-motion: reduce) { .apps-hero-art img, .apps-hero-art::before { animation: none; } }