/* MetaCore Education · MOKSLO CORE showcase · 2026-09-23
   Additive visual layer. No runtime/data authority. */
.mokslo-core-showcase{
  position:relative;
  overflow:hidden;
  padding:86px 0 92px;
  background:
    radial-gradient(900px 460px at 8% -10%,rgba(73,151,255,.16),transparent 66%),
    radial-gradient(820px 420px at 94% 112%,rgba(57,203,183,.12),transparent 64%),
    linear-gradient(145deg,#09141d 0%,#0d1f2a 48%,#102834 100%);
  color:#f4f8fb;
}
.mokslo-core-showcase:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(to bottom,transparent,black 16%,black 84%,transparent);
}
.mokslo-core-showcase .wrap{position:relative;z-index:1}
.mcore-head{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);
  gap:44px;
  align-items:end;
  margin-bottom:34px;
}
.mcore-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#9ed8ff;
}
.mcore-eyebrow:before{
  content:"";
  width:28px;
  height:1px;
  background:currentColor;
  opacity:.75;
}
.mcore-head h2{
  margin:0;
  max-width:840px;
  color:#fff;
  font-size:clamp(36px,4.6vw,66px);
  line-height:.98;
  letter-spacing:-.055em;
}
.mcore-head p{
  margin:0;
  color:rgba(238,246,250,.72);
  font-size:17px;
  line-height:1.72;
}
.mcore-metrics{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin:0 0 18px;
}
.mcore-metric{
  min-height:142px;
  padding:21px 21px 18px;
  border:1px solid rgba(255,255,255,.105);
  border-radius:22px;
  background:rgba(255,255,255,.052);
  box-shadow:0 24px 64px rgba(0,0,0,.16);
  backdrop-filter:blur(14px);
}
.mcore-metric strong{
  display:block;
  margin-bottom:9px;
  color:#fff;
  font-size:clamp(30px,3vw,48px);
  line-height:1;
  letter-spacing:-.055em;
}
.mcore-metric span{
  display:block;
  color:rgba(236,245,249,.68);
  font-size:13px;
  line-height:1.48;
}
.mcore-flow{
  display:grid;
  grid-template-columns:1fr 1.28fr 1fr 1fr;
  gap:12px;
  align-items:stretch;
}
.mcore-node{
  position:relative;
  min-height:238px;
  padding:24px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:24px;
  background:rgba(4,12,18,.46);
}
.mcore-node--core{
  border-color:rgba(100,199,255,.30);
  background:linear-gradient(155deg,rgba(55,138,189,.22),rgba(6,18,25,.64));
  box-shadow:0 22px 70px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.06);
}
.mcore-node--persona{
  border-color:rgba(74,216,190,.24);
  background:linear-gradient(155deg,rgba(43,141,129,.18),rgba(6,18,25,.58));
}
.mcore-node small{
  display:block;
  margin-bottom:14px;
  color:#8fb3c6;
  font-size:10px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.mcore-node h3{
  margin:0 0 10px;
  color:#fff;
  font-size:23px;
  letter-spacing:-.035em;
}
.mcore-node p{
  margin:0 0 15px;
  color:rgba(236,245,249,.68);
  font-size:14px;
  line-height:1.58;
}
.mcore-chips{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}
.mcore-chips span{
  display:inline-flex;
  padding:7px 9px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:999px;
  background:rgba(255,255,255,.045);
  color:rgba(244,249,251,.80);
  font-size:11px;
  line-height:1;
}
.mcore-arrow{
  position:absolute;
  top:50%;
  right:-19px;
  z-index:3;
  width:26px;
  height:26px;
  margin-top:-13px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:50%;
  background:#102632;
  color:#93d8ff;
  display:grid;
  place-items:center;
  font-size:13px;
}
.mcore-foot{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:24px;
  align-items:center;
  margin-top:18px;
  padding:18px 20px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:20px;
  background:rgba(255,255,255,.035);
}
.mcore-boundary{
  color:rgba(235,245,249,.72);
  font-size:13px;
  line-height:1.62;
}
.mcore-boundary strong{color:#fff}
.mcore-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}
.mcore-actions .btn{
  border-color:rgba(255,255,255,.17);
  color:#fff;
  background:rgba(255,255,255,.06);
}
.mcore-actions .btn.primary{
  border-color:#d8b56b;
  background:#d8b56b;
  color:#101820;
}
.mcore-note{
  margin:12px 2px 0;
  color:rgba(222,236,242,.46);
  font-size:11px;
  line-height:1.5;
}
@media (max-width:1040px){
  .mcore-head{grid-template-columns:1fr;gap:20px}
  .mcore-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mcore-flow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mcore-arrow{display:none}
}
@media (max-width:680px){
  .mokslo-core-showcase{padding:66px 0 72px}
  .mcore-head{margin-bottom:26px}
  .mcore-head h2{font-size:clamp(36px,12vw,52px)}
  .mcore-head p{font-size:15px}
  .mcore-metrics{grid-template-columns:1fr 1fr;gap:9px}
  .mcore-metric{min-height:126px;padding:18px 16px;border-radius:18px}
  .mcore-metric strong{font-size:31px}
  .mcore-flow{grid-template-columns:1fr}
  .mcore-node{min-height:0;border-radius:20px}
  .mcore-foot{grid-template-columns:1fr}
  .mcore-actions{justify-content:flex-start}
  .mcore-actions .btn{width:100%;justify-content:center;text-align:center}
}


/* V2 · early Core signal + tighter mobile rhythm */
.mcore-early{
  position:relative;
  z-index:3;
  margin:-1px 0 0;
  border-top:1px solid rgba(15,35,48,.08);
  border-bottom:1px solid rgba(15,35,48,.08);
  background:linear-gradient(180deg,#f7fafc 0%,#f2f7fa 100%);
}
.mcore-early__inner{
  display:grid;
  grid-template-columns:minmax(250px,1.15fr) minmax(420px,1.7fr) auto;
  gap:24px;
  align-items:center;
  padding-top:22px;
  padding-bottom:22px;
}
.mcore-early__copy span{
  display:block;
  margin-bottom:5px;
  color:#557385;
  font-size:10px;
  font-weight:800;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.mcore-early__copy strong{
  display:block;
  color:#102631;
  font-size:18px;
  line-height:1.22;
  letter-spacing:-.025em;
}
.mcore-early__copy p{
  margin:6px 0 0;
  color:#637b88;
  font-size:12px;
  line-height:1.5;
}
.mcore-early__rail{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
}
.mcore-early__rail span{
  min-height:58px;
  display:flex;
  align-items:center;
  gap:9px;
  padding:10px 11px;
  border:1px solid rgba(16,38,49,.09);
  border-radius:14px;
  background:rgba(255,255,255,.74);
  color:#2b4655;
  font-size:11px;
  font-weight:700;
  line-height:1.28;
}
.mcore-early__rail i{
  flex:0 0 auto;
  width:24px;
  height:24px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#102b38;
  color:#a9dcff;
  font-style:normal;
  font-size:9px;
  font-weight:800;
  letter-spacing:.03em;
}
.mcore-early__actions{
  display:flex;
  flex-direction:column;
  gap:7px;
  align-items:flex-end;
}
.mcore-early__actions a{
  color:#173948;
  font-size:11px;
  font-weight:800;
  text-decoration:none;
  white-space:nowrap;
}
.mcore-early__actions a:last-child{
  color:#68808b;
  font-weight:700;
}
.mcore-early__actions a:hover{text-decoration:underline}

@media (max-width:1120px){
  .mcore-early__inner{grid-template-columns:1fr;gap:14px}
  .mcore-early__actions{flex-direction:row;align-items:center;justify-content:flex-start;gap:18px}
}
@media (max-width:680px){
  .mcore-early__inner{padding-top:18px;padding-bottom:18px;gap:12px}
  .mcore-early__copy strong{font-size:16px}
  .mcore-early__copy p{font-size:11.5px}
  .mcore-early__rail{
    grid-template-columns:1fr 1fr;
    gap:7px;
  }
  .mcore-early__rail span{
    min-height:48px;
    padding:8px 9px;
    border-radius:12px;
    font-size:10.5px;
  }
  .mcore-early__rail i{width:21px;height:21px;font-size:8px}
  .mcore-early__actions{
    justify-content:space-between;
    gap:10px;
    padding-top:2px;
  }
  .mcore-early__actions a{font-size:10.5px}

  .mokslo-core-showcase{padding:50px 0 54px}
  .mcore-head{gap:15px;margin-bottom:20px}
  .mcore-head h2{font-size:clamp(30px,8.8vw,38px);line-height:1.04}
  .mcore-head p{font-size:14px;line-height:1.56}
  .mcore-metrics{gap:7px;margin-bottom:12px}
  .mcore-metric{min-height:108px;padding:14px 13px;border-radius:15px}
  .mcore-metric strong{font-size:27px;margin-bottom:7px}
  .mcore-metric span{font-size:11.2px;line-height:1.38}
  .mcore-flow{gap:8px}
  .mcore-node{padding:17px;border-radius:17px}
  .mcore-node small{margin-bottom:9px;font-size:9px}
  .mcore-node h3{margin-bottom:7px;font-size:20px}
  .mcore-node p{margin-bottom:10px;font-size:12.5px;line-height:1.48}
  .mcore-chips{gap:5px}
  .mcore-chips span{padding:6px 7px;font-size:9.5px}
  .mcore-foot{gap:12px;margin-top:12px;padding:14px;border-radius:16px}
  .mcore-boundary{font-size:11.5px;line-height:1.5}
  .mcore-note{margin-top:9px;font-size:10px}
}